HTML Pop up Box Options

[Terminator]

I am wanting to make a little pop-up box that gives a description about something.

Basically you would click on a link on the page that says "description" and then a little box would appear on top of the page with some text, and there would be either an "x" in the corner of the box to close it, or the word "close".

I have done searches on this and found many, many, different examples and ways to do this, and was wondering if anyone here had advice on the simplest method to use. I am assuming I have to use javascript.

Should I just do one of these from this link, and then style it with CSS?

http://www.w3schools.com/js/js_popup.asp

Many google searches on this take me to that stackoverflow site, and as usual the posts on that site are just people arguing and insulting each other over which code is correct to use, while never actually providing a final solution.

Thanks.

[Christian J]

was wondering if anyone here had advice on the simplest method to use.

That depends on a few things:

- Should the text and code for each popup be easy for you to manage. I.e., are there many popups, and do you change their content often? A sample text/HTML code might help...

- Should the code be short and complex or longer but simple?

- Which web languages are you more familiar with?

I am assuming I have to use javascript.

Probably, though it might work with CSS3 too (but with less browser support). If the popup descriptions are important I wouldn't rely on neither JS or CSS3.

Should I just do one of these from this link, and then style it with CSS?

http://www.w3schools.com/js/js_popup.asp

That page is about javascript alerboxes etc, those can't be styled with CSS. What you probably want is displaying positioned HTML elements on the same page, or open a popup windows in which separate web pages are loaded.

[pandy]

Or if the text isn't too long you could just use the title attribute. You know, the little yellow tooltip?

[Terminator]

Or if the text isn't too long you could just use the title attribute. You know, the little yellow tooltip?

The text isn't too long, it will be about as long as both sentences that you typed. However I was thinking that the Title Attribute does not work well on mobile devices with the whole mouseover thing.

That depends on a few things:

- Should the text and code for each popup be easy for you to manage. I.e., are there many popups, and do you change their content often? A sample text/HTML code might help...

- Should the code be short and complex or longer but simple?

- Which web languages are you more familiar with?

The text for the pop-ups aren't going to change, and there will only be a few of them here and there on just a few pages. Once the text and code are created for these, they probably will never be touched again.

Right now I am just familiar with HTML5, CSS3, and a little JavaScript. I don't know how to create my own JavaScript code yet, but I understand how to set it up when using someone else's JavaScript code. I know some PHP too.

When I said simple, I meant just a real basic pop-up box. Because some of the coding I saw on that stackoverflow site looked like it was way too long and complex for what I wanted to do.

I wish I could find an example of what I wanted, I have seen these boxes used before but don't remember where.

Probably, though it might work with CSS3 too (but with less browser support). If the popup descriptions are important I wouldn't rely on neither JS or CSS3..

The popup descriptions are important, but not a major part of the site, so people wouldn't be clicking on them every visit. I don't necessarily have to use JavaScript if these pop-up boxes could be done with HTML, actually I would rather not use JS if I didn't have to.

[Christian J]

I was thinking that the Title Attribute does not work well on mobile devices with the whole mouseover thing.

Apparently it doesn't work in screen readers like JAWS either: http://silktide.com/i-thought-title-text-i...ty-i-was-wrong/ and the HTML5 spec discourages its use too: http://www.w3.org/TR/html5/dom.html#attr-title

I wish I could find an example of what I wanted, I have seen these boxes used before but don't remember where.

Here's a simple popup window: http://htmlhelp.com/faq/html/links.html#window-specify --or do you want something smaller?

[Terminator]

the HTML5 spec discourages its use too: http://www.w3.org/TR/html5/dom.html#attr-title

They make us do it all the time class, I knew using Title tooltip was pretty much PC only, and figured it wasn't highly recommended.

Here's a simple popup window: http://htmlhelp.com/faq/html/links.html#window-specify --or do you want something smaller?

Thanks, but what I was looking for was something like this below:

I just found this video, you cant really hear what he says unless you increase volume, nor can you see what he is typing on his screen, but that dropbox link shows the code he used.

https://www.youtube.com/watch?v=VnHvVz_bFKo

https://www.dropbox.com/sh/ielxqp6cmnk9mlz/...iYL3Lxy4ra?dl=0

I am going to see if using his code will work for me. I can change it to just say "close" instead of "Click here to close popup box one"

Unless you think there is something better to use than what he did, but it looks like this is what I wanted. I'll test it on mobile devices too.

This post has been edited by Terminator: Jun 1 2015, 03:02 PM

[Christian J]

Didn't watch the video (why not read text instead? it's both simpler and faster), but here are few examples on how to toggle content: http://forums.htmlhelp.com/index.php?showtopic=21311

In addition you need some CSS (positioning?) to make the description boxes show up where you want them.

[Christian J]

Here's a CSS-based idea that's supposed to degrade gracefully even in older browsers.

With CSS, the description boxes will appear at the top of the page, both when following links, using bookmarks, and alas also when using the browser's Back button. If the latter is unacceptable one might use checkboxes and the :checked pseudo-class instead of links.

Without CSS, the "read more" links will scroll to the descriptions (the latter might be placed at the bottom of the page like footnotes), and when clicking the "(x)" links, the page will scroll back to the last clicked "read more" link.

CODE

/* The :not pseudo-class should hide CSS from non-supporting browsers like IE8 */
.tooltip_description:not(:target) {
display: none;
}

/* Show and style description boxes */
.tooltip_description:target {
display: block;
position: absolute;
top: 1em;
left: 50%;
margin-left: -5em;
width: 10em;
border: 1px solid #000;
color: #000;
background: pink;
padding-right: 2em;
}

/* Closing button in description box */
.tooltip_description:target a {
position: absolute;
top: 0; right: 0;
}

<a href="#description1" id="tooltip1">read more</a>
<a href="#description2" id="tooltip2">read more</a>

<p class="tooltip_description" id="description1">description 1<a href="#tooltip1">(x)</a></p>
<p class="tooltip_description" id="description2">description 2<a href="#tooltip2">(x)</a></p>

[Terminator]

Didn't watch the video (why not read text instead? it's both simpler and faster), but here are few examples on how to toggle content: http://forums.htmlhelp.com/index.php?showtopic=21311

In addition you need some CSS (positioning?) to make the description boxes show up where you want them.

I didn't watch that video at all, I almost closed it completely until I decided to check the vid description, and glad I did.

Yes I will probably need to position it a little. I saved your code and will try that out, thanks.

[Christian J]

Here's another one using only CSS. Not sure how accessible it is, older browsers should at least display all content (but in an ugly way).

CODE

<style type="text/css" media="screen">
/* The :not pseudo-class should hide CSS from non-supporting browsers like IE8 */
input[type=radio], input.description:not(:checked) ~ span.description {display: none;}

/* Buttons */
label.button {text-decoration: underline; cursor: pointer;}
input.description:focus ~ label.button {outline: solid;}

/* Indicate last clicked button */
input.description:checked ~ label.button {color: red;}

/* Show and style description boxes */
input.description:checked ~ span.description {
display: block;
position: absolute;
top: 1em;
left: 50%;
margin-left: -5em;
width: 10em;
border: 1px solid #000;
color: #000;
background: pink;
padding-right: 2em;
}

/* Closing button in description box */
input.description:checked ~ span.description label {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: red;
}
</style>

<span>
<input type="radio" name="description" id="button1">
<input type="radio" name="description" class="description" id="description1">
<label for="description1" class="button">read more</label>
<span class="description">description 1<label for="button1">(x)</label></span>
</span>

<span>
<input type="radio" name="description" id="button2">
<input type="radio" name="description" class="description" id="description2">
<label for="description2" class="button">read more</label>
<span class="description">description 2<label for="button2">(x)</label></span>
</span>

[Terminator]

Here's another one using only CSS. Not sure how accessible it is, older browsers should at least display all content (but in an ugly way).

Thanks for that. How much do you think I should worry about old browsers? Because IE is going away soon in place of something else. Do you think a lot of web programmers will continue to accommodate IE browser fixes with web coding?

[Christian J]

How much do you think I should worry about old browsers?

At least make pages readable (it doesn't have to look pretty) for as long as people are still using the old browsers.

Because IE is going away soon in place of something else.

If you mean the future "Edge" (former "Spartan") browser, I think it will only run on Windows 10. Even today there seems to be a large amount of Windows XP users, that can't install any newer version than IE8 (but maybe they're using some other browser brand). Windows 7 might become just as long-lived as XP, which I think means at least IE11 will remain for several years more.

Do you think a lot of web programmers will continue to accommodate IE browser fixes with web coding?

Some may lack the competence, others may think it takes too much time (though it doesn't have to require much more work with some planning).