CODEWITHSUNDEEP
javascripthtmlcsspopupwindow
etangins
etangins

Reputation: 624

How to Make Info Boxes Appear on Website on Click

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?

Upvotes: 1

Views: 5942

Answers (7)

Plentybinary
Plentybinary

Reputation: 179

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;
}

Upvotes: 2

Daniel Jordan
Daniel Jordan

Reputation: 286

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

Upvotes: 2

Singular1ty
Singular1ty

Reputation: 2615

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"); 
});

Upvotes: 3

Microcipcip
Microcipcip

Reputation: 685

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.

Upvotes: 2

bto.rdz
bto.rdz

Reputation: 6720

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/

Upvotes: 1

Kevin
Kevin

Reputation: 160

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

Upvotes: 2

VtoCorleone
VtoCorleone

Reputation: 17203

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

Upvotes: 2

Related Questions