Having trouble linking files together

[johned]

I have two HTML pages
The first is the page to my ebooks and the second is the open modal that should open up when clicked on the beginners ebook shown in the code below.
My issue is when I click on the first html file it opens up in the same tab but it just shows a “SELECT OPTION” and only when I click on it the open modal opens up.
How should I set up my code so when I click on the beginnermensimage.jpg the open modal pops up while still showing the rest of the page in the background?
Thanks in advance

http://codepen.io/Johned22/pen/JbjWNR

[Beverleyh]

My issue is when I click on the first html file it opens up in the same tab…

That’s because it’s a standard hyperlink to beginnermensdescription2.html (that’s all your code says it is anyway).

…but it just shows a “SELECT OPTION” and only when I click on it the open modal opens up.

We can’t comment. We can’t see the modal code that’s on the second page (you haven’t provided it).

How should I set up my code so when I click on the beginnermensimage.jpg the open modal pops up while still showing the rest of the page in the background?

Try merging the contents of the second page (beginnermensdescription2.html) into the demo? It’s impossible to say without knowing what’s in that second page though.

As it stands, the beginnermensimage.jpg is currently set up as a straight link to beginnermensdescription2.html. I would expect to see some sort of accompanying JavaScript and CSS to make a modal overlay – or even just CSS if the modal is being triggered by the :target selector. If that already happens in beginnermensdescription2.html, take your cues from that.

[johned]

Thanks for your response.
Sorry I was not more clear.
I have made two codepens that I attached below to try and make my problem a little clearer.
Code pen 1 shows the image that I want to be clickable (beginnermensimage.jpg) it also has the link to the html file which is the html code that is in codepen 2 (beginnermensdescription2.html).
My problem is when I click the image in the first codepen it take the user to a blank page (although in the same tab) with the text “SELECT OPTION”. When the user clicks the “SELECT OPTION” link it opens the open modal.
My problem is I want it to automatically open when the user clicks on the beginnermensimage.jpg rather than it being sent to the clickable text. I also want the rest of the page to still be in the background and right now when the open modal is open I do not see the rest of the page in the background which I want to see.

I hope I made my issue a little clearer now.

code pen 1 http://codepen.io/Johned22/pen/JbjWNR

code pen 2 http://codepen.io/Johned22/pen/GNRmwK

Thanks in advance

[Naresh]

Try setting the “opacity” and “pointer-events” of class .modalDialog to “1” and “auto” respectively.

This way you’ll get the modal opened automatically when you click on beginnermensimage.jpg and there is no need to set the .modalDialog:target {…} thing in this case (if I got it right).

Hope it helps!

[Beverleyh]

I think I understand what you’re trying to do.

But take a look at your markup and you should be able to see why certain undesirable behaviours are present; Clicking a link in the first demo takes you to a second page. That’s happening because you’re linking to a second page <a href="beginnermensdescription2.html">. If you don’t want that to happen, don’t use an anchor element with an href value that targets another web page.

Let’s not focus on that code for a minute though. Instead, concentrate on fixing the 2nd demo;

<a href="#openModal" src="beginnermensimage.jpg" target="_blank">

You can’t have a src attribute in an anchor – so take it out. And you don’t need to open up anything in a new page because you’re targeting an id of an element that’s on the same page ( the #openModal part) – so take out target="_blank"too.

You’ll probably find that the 2nd demo behaves more like expected once you’ve made these changes. And with this cleaner markup, you should find it easier to merge the image from the 1st demo over into the 2nd (the image replaces the SELECT OPTION text if I understand correctly).

[johned]

Hello

That opened it up when I clicked the image but now it will not X of when clicking the X.
How do I make it dissepears when I click the X?

[Beverleyh]

Tweaking the 2nd demo as previously advised – it opens and closes fine for me here on mobile.

If you mean something else, please post your latest demo.

[johned]

I have made the changes you suggested and it now opens and closes but it still goes to the select text and only when I click on that it then opens the modal.
The first code pen is the edits you suggested and the second code pen is for the second page that I have not edited.
Where have I gone wrong?
Thanks in advance
http://codepen.io/Johned22/pen/vyYqEq
http://codepen.io/Johned22/pen/bBGPVw

[Beverleyh]

Well, you haven’t made all the changes I suggested – where’s the merged demo?

I’ve already gone over the linking-to-another-page thing twice before. Re: http://codepen.io/Johned22/pen/bBGPVw It’s opening a new page because you’re linking to another page. Keep the basic rules of HTML in mind while you work; if you don’t want to link to a new page, don’t put in the hyperlink.

But like I said before, ignore this demo for now. The important thing is that http://codepen.io/Johned22/pen/vyYqEq is working as desired. So now you can move the image element (not the anchor around it) from http://codepen.io/Johned22/pen/bBGPVw into http://codepen.io/Johned22/pen/vyYqEq The image replaces the SELECT OPTION text (as I understand).

Your goal is to merge the 2 demos (image from one, functionality from the other) and so far you haven’t done this.

[johned]

Thanks for your replying.
I am trying to do what you are saying but I am having trouble following.
I moved the image to where the select text was but now nothing works and am a total loss.
This was the new codepen for the change in thE HTML
http://codepen.io/Johned22/pen/KNwdwW
Am I supposed to put them all in one html and css file as right now I am getting more confused.

[Beverleyh]

I moved the image to where the select text was but now nothing works and am a total loss.

sigh

You haven’t included any of the CSS.

Sorry but I’m finding this thread really frustrating so I’m going to leave it here. I wish you the best in your project and hope that somebody with more patience than me will continue. :/

[Author]

Posts