How to Make Info Boxes Appear on Website on Click

Question

On certain websites, when a link such as "read more" is clicked, a popup box will appear, and the behind webpage will often darken. The popup box then contains information and can be closed by clicking a button in the corner.

I'd like to make several of them. Would I do so simply by creating a div and pehaps another one with a transparency to "darken" the webpage behind the popup or is there a code I could use in javascript?

Answer 1

Generally people here are suggesting lightboxes, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css files and .js files, when your problem could be solved via CSS and JS.

Check out this fiddle: http://jsfiddle.net/3vmL6/1/

In your code you have a a simple div of a class modal-dialog, which is automatically hidden in the css (see the fiddle).

<div id="info-modal" class="modal-dialog">
<div>
  <a href="#close" title="Close" class="close">x</a>
  <h2>Hello!</h2>
  <p>You can display any information you want here!</p>
</div>

A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique divs using different ID's, but all belonging to the same class.

$("#click-me").click(function () {

$.ajax({
    success: function (data) {                               
        console.log(data);   
        $('#info-modal').addClass("show"); 
    },
    async: true
    });    
});

$(".modal-dialog .close").click(function(){
    $(this).closest(".modal-dialog").removeClass("show"); 
});

Answer 2

If you're doing it yourself, you'd put an overlay over the entire page and give it a high z-index so that it will cover all of your dom elements. Then have a div, with a higher z-index positioned where you need it to be with the content you want.

An easier approach is to use a library that already has that functionality baked in

jQuery UI dialog - http://jqueryui.com/dialog/

bootstrap modal - http://getbootstrap.com/javascript/#modals

Answer 3

I believe this is what you are looking for: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Answer 4

What you are looking for is a lightbox/modal box. I recommand Magnific Popup because it works with responsive design, but colorbox is also very good.

Answer 5

You essentially are looking to work with modals so. Zurb provide a library to do just this for you in foundation. The library is called reveal. It's simple to use. I use it a good bit. You can see it here. Hope that helps.

http://zurb.com/playground/reveal-modal-plugin

Answer 6

This code should do what your asking for

window.onload = function() {
        document.getElementById("member").onclick = function(){
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
            };
<div id="overlay">
</div>
<div id="popup">
your readme text in here 
</div>
#overlay
{
display:none;    
position:fixed; 
left:0px;       
top:0px;         
width:100%;      
height:100%;     
background:#000; 
opacity:0.5;     
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;           
top:40%;             
width:600px;         
height:500px;
margin-top:-75px;   
margin-left:-150px;  
background:#FFFFFF;  
border:2px solid #000;  
z-index:100000;
}

Answer 7

they are called modals or dialogs, there are several frameworks that will help you in this case.

one of the most popular is bootstrap

http://getbootstrap.com/