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
I don’t know what the second page is supposed to do.
It would have been more logical to create two working pages than to cram the HTML for both pages into one CodePen that cannot demonstrate the issue. There is no CSS to style anything (maybe not needed for the demo), the images have no image nor dimensions (the latter is always helpful), and is something supposed to create a “modal” dialog box? How? There are several missing close-tags in the HTML so where the boxes are actually closed is something of a guess. You need to pay more attention to code structure. Don’t leave close tags up to the browser’s discretion. They are not guaranteed to “think” the same.
By default an anchor will open its target in the current tab. The intent is for the user to make the decision whether to open a link in a new tab or not. You can force a link to open in a new tab by adding the target attribute to the anchor with the value "_blank", target=“_blank” however, doing so can be an accessibility issue.
Change the following files as needed to demonstrate the issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>first page</title>
<style>
/* CSS could go here */
</style>
</head>
<body>
<figure id="beginner">
<a href="beginnermensdescription2.html"><img id="image" src="http://placehold.it/250x100" width="250" height="100" alt=""></a>
<figcaption>
<p class="program">Beginner Program</p>
<p class="info">For Men</p>
<p class="price">$0.99</p>
</figcaption>
</figure>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>beginnermensdescription2</title>
<style>
/* CSS could go here */
</style>
</head>
<body>
<div><a href="#openModal">SELECT OPTIONS</a></div>
<div id="openModal" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a></div>
</div>
</body>
</html>
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
In the first CodePen, where is the anchor supposed to be closed? What does it contain, in other words?
In the second CodePen, where are either of the two lower divs supposed to be closed? What do they contain, in other words?
You seem to be a selective reader/learner…
1 Like
I have made a open modal that works but when clicked it first goes to another page and only once the text on that page is clicked it opens up. I made it open straight away but when I did that it would not close so I am back to square one again. I want the open model to open straight away when they click on the image rather than going to the text link first. I have asked this question on several forums and although people have been trying to be helping I am still not having any luck. I have attached the two code below. When the user clicks on the image in the first codepen attached it should open up the second codepen instantly . First code - http://codepen.io/Johned22/pen/rWaLPo second code - http://codepen.io/Johned22/pen/KNwdwW
Thanks in advance
It would be helpful if you provided more information about what you have done and followed the requests from the previous thread including the ones to clean up your HTML.
Can CodePens open other CodePens? If not, please prepare working pages as I recommended that should demonstrate the issue instead of incomplete CodePens that do nothing.
I can’t really understand the question I’m afraid but if you want to open a new page with the modal already showing then you can use the fragment identifier (#openModal) at the end of the link destination as you are using :target to open the modal (pen/KNwdwW#openModal).
e.g.follow this link:
I don’t think that was your question though 
Threads merged as seems to be the same question.
3 Likes
Thanks for your replies.
I am having a hard time explaining my situation so I wrote the codepens out again.
Right now when I click on the beginner image in codepen one it opens another page in the same tab with the clickable text “SELECT”. Once I click the select text then the image from codepen two will open up.
I want codepen two to open up straight away when the user clicks on the image from codepen one without going to the “SELECT” text first.
I have attached my two code pens below along with the website page that I am trying to work on. If you see the website page I attached (http://www.tvisionfitness.com/ebooks.html) I want the open modal page to open up when clicking the first top box on the left. Not going to tyhe “SELECT” text first
Thanks in advance
codepen one- This is the ebook page( it shows the beginner box from this page http://www.tvisionfitness.com/ebooks.html)
http://codepen.io/Johned22/pen/YpPEJP
codepen two- This is the description of the beginner ebook which contains the open modal
http://codepen.io/Johned22/pen/ObPOaW
Looking at the markup from Codepen1, there’s no link to Codepen2, so I’m not surprised that things are confused. Codepen1 has the following markup.
<figure id="beginner">
<a href="beginnermensdescription2.html"><img id="image" src="http://placehold.it/250x100" width="250" height="100" alt=""></a>
<figcaption>
<p class="program">Beginner Program</p>
<p class="info">For Men</p>
<p class="price">$0.99</p>
</figcaption>
</figure>
It’s not a great surprise to find that Codepen gives the error message “Oh no! You clicked a broken link in a Pen!”, as it doesn’t know anything of the file beginnermensdescription2.html.
BTW, with Codepen, you don’t need all of the <DOCTYPE>, <head></head, or the <body></body> tags - YOU ONLY NEED WHAT GOES BETWEEN THE BODY TAGS.
Thanks for your reply.
The second copepen does not seem to be working so I have wrote it out here
HTML-
<body>
<div><a href="#openModal">SELECT OPTIONS</a></div>
<div id="openModal" class="modalDialog">
<div><a href="#close" title="Close" class="close">X</a></div>
</div>
</body>
CSS-
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 900px;
height: 600px;
position: relative;
margin: 2% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
I got the second code pen to work
When you say “work”, what were you meaning? I can’t see any difference in it at the moment.
The second codepen had a error message now it works in codepen.
I just want the age to open up when the user clicks the image that is shown in the forst codepen.
As you can see from the second codepen it goes to the Select text first how do I miss it so it open s when I click on the image from the first codepen.
Like the site http://www.instafeatures.net/ when the user clicks the green button the open modal opens straight away.
I want my page to do that when they click on the image.
How do I do this?
I know I am not explaining myself clearly as everyone is having trouble understanding what I am saying but I do not know how to explain myself any other way.
That clarifies things a bit. The modal should set up within Codepen1, not on Codepen2. At least that’s the first thing that needs sorting. The modal needs to start hidden/invisible, then appear when the image is clicked. Within the modal, would be the content to take you off to Codepen2 / Codepen3 / Codepen4 etc.
I gave you the answer to that in my previous post. You just add the fragment identifier to the url and then it will go to the second page and open the modal straight away.
Just click that link above and let us know if that’s what you meant as it is still quite ambiguous.
That’s a single page that open a modal in the same page and then calls extra content via an iframe. That’s nothing like your two codepen pages.
If you want to open a modal in the same page then you put the modal html at the end of the one page (just like you have in the second example).
Thanks for all your help. Yes I want it to open up in the same page.
I re did the code.
In the HTML it has all 6 pages (lines 1-36) This is the images for each ebook.
On lines 39-42 is the open modal for the beginner info box.
This box should open up when the user clicks on the image on line 2 in the HTML.
So where do I place the html for the box so it will open as soon as I click the beginner image on line 2.
I am really trying hard to figure this out am am not expecting you guys to do my work for me but if you could write out at least part of where I put the code that would help as after 3 days I am having ta lot of trouble and frustration.
This is the code below
Thanks
This is the third time I have mentioned this now so I hope I’m not wasting my time but you would use the fragment identifier to reach the modal.
e.g. <a href="#openModal">
Here:
<figure id="beginner">
<a href="#openModal"> <img src="beginnermensimage.jpg" id="image">
<figcaption><p class="program">Beginner Program</p><p class="info">For Men</p><p class="price">$0.99</p></figcaption>
</figure>
if you want more than one modal then they will need different ids so you can reference them uniquely each time using the fragment identifier (#) method.
e.g. <a href="#openModal2"> then <a href="#openModal3"> etc.
Here’s the first three items:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p.program {
font-weight: bold;
font-size: 23px;
margin: 45px 0px -26px 12.5px;
color: black;
}
p.info {
font-weight: bold;
font-size: 23px;
color: Black;
margin: 20px 0px -26px 0px;
text-align:center;
}
p.price {
font-size: 25px;
color: red;
font-weight: bold;
text-align: center;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 900px;
height: 600px;
position: relative;
margin: 2% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
</style>
</head>
<body>
<figure id="beginner"> <a href="#openModal"> <img src="beginnermensimage.jpg" id="image">
<figcaption>
<p class="program">Beginner Program</p>
<p class="info">For Men</p>
<p class="price">$0.99</p>
</figcaption>
</a> </figure>
<figure id="advanced"> <a href="#openModal2"><img src="advancedmensimage.jpg" id="image2">
<figcaption>
<p class="program">Advanced Program</p>
<p class="info">For Men</p>
<p class="price">$0.99</p>
</figcaption>
</a>
</figure>
<figure id="bundle"> <a href="#openModal3"><img src="beginnerwomensimage.jpg" id="image3">
<figcaption>
<p class="program">Beginner Program</p>
<p class="info">For Women</p>
<p class="price">$0.99</p>
</figcaption>
</a>
</figure>
<div id="openModal" class="modalDialog">
<div>
<h2>Modal 1</h2>
<a href="#close" title="Close" class="close">X</a> </div>
</div>
<div id="openModal2" class="modalDialog">
<div>
<h2>Modal 2</h2>
<a href="#close" title="Close" class="close">X</a> </div>
</div>
<div id="openModal3" class="modalDialog">
<div>
<h2>Modal 3</h2>
<a href="#close" title="Close" class="close">X</a> </div>
</div>
</body>
</html>
Validate your html as you forgot to close the anchor in the first block and there are 2 missing closing divs in the modal html.
1 Like
Thanks for your help Paul
I was really having trouble with this and could not figure it out even with peoples help. Thanks again for your patience.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.