Menu
I have to create a pop-up that will be show when the user clicks a link.
I think that I can not use JavaScript because I have no access to the full template, so I can't put the JavaScript into the <head></head> section of the page (I can't modify it).
Can I create a pure HTML pop up without using JavaScript, or alternatively can I declare my JavaScript into the <body></body> of my HTML code and not into the <head></head> section?
798
Yes, you can do this in pure HTML and CSS. The trick is to use the :target pseudo selector. Rules with :target will match when the URL anchor matches a particular ID. You can update the URL anchor by creating a plain anchor link. This does have a slight jumping effect because we're using anchors, but it is possible.
So for example: http://jsfiddle.net/X49zJ/1/
#modal {
display: none;
width: 300px;
height: 100px;
border: 1px solid #CCC;
background: #EEE;
}
#modal:target {
display: block;
}<a href="#modal">Click to Trigger The Modal</a>
<div id="modal"> I am a Hidden Modal</div>See https://developer.mozilla.org/en-US/docs/Web/CSS/:target for more information on the :target and also this demo for a much prettier lightbox.
For more flexibility, you can always add JavaScript. If your JavaScript is non-essential, it's generally best practice to put JavaScript at the bottom of the body, or add the script tag with the async attribute so it doesn't pause rendering of content when it loads.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
