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?
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?
-
1
This is what the
<dialog>element is intended for, but it has almost no browser support. – Anthony Commented Oct 5, 2013 at 15:40 -
1
@Anthony as far as I can tell,
<dialog>is not about "dialog box" but about "a dialog between a horse and a toad"; that is, a conversation. – Pointy Commented Oct 5, 2013 at 15:46 -
1
That was when
dialogwas a different container for definition lists. It's now : "The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.” -- w3/TR/html5/interactive-elements.html#the-dialog-element – Anthony Commented Oct 5, 2013 at 17:19 - 1 But I do advocate for horse and toad conversations. – Anthony Commented Oct 5, 2013 at 17:20
5 Answers
Reset to default 2Yes, 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/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/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.
Nowadays, we can do that without JavaScript nor CSS by using the Popover API.
<button popovertarget="mypopover">Toggle the popover</button>
<dialog id="mypopover" popover>Popover content</dialog>References:
- Example: https://mdn.github.io/dom-examples/popover-api/blur-background/
It's permittable to use target="_blank" in the <a> tag if you're using HTML5, which will generally make the link open in a new tab in modern browsers. This is preferred by quite a lot of users so you may want to consider this.
Putting JavaScript into the body of the page should be perfectly fine if you have plete control over the HTML. It is put within simple <script> tags, after all — there's no need for it to be in the <head>.
If whatever CMS you're using filters out <script> tags but you still have control over HTML attributes, you might be able to get away with putting JavaScript in an onclick attribute:
<a href="javascript:void(0);" onclick="window.open(document.URL, '_blank', 'height=200,location=yes,width=350,scrollbars=yes,status=yes');">Link</a>
You cannot do this without JavaScript, however you can put script tags literally anywhere in your page, and it should work, so try this.
<div>
<h1 id="test">New Content</h1>
<script>
var test = document.getElementById('test');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
</div>
You can do this with HTML and CSS, like so.
To answer your second question, generally it's possible to put JavaScript in the <body> section of your page as well.