[Multin]

I am trying to make something like onclick it will open this onpage box (with info on it) and the rest of the page will be either darkened or blurred (kinda like when you open a facebook photo)

Does anyone know how to do this? Thanks, 🤝🤝

[Crypto™]

I am trying to make something like onclick it will open this onpage box (with info on it) and the rest of the page will be either darkened or blurred (kinda like when you open a facebook photo)

Does anyone know how to do this? Thanks, 🤝🤝

Have you attempted this at all? If not, definitely Google Modal Dialogs.

A little help

[Multin]

Have you attempted this at all? If not, definitely Google Modal Dialogs.

A little help

I have tried and I am not getting what I expected.. I will check out your link.

---

For some reason the background lightbox type effect (the black in the background when you click on it)
Is not going full screen. I have no idea either why, using that link you gave me, as well on the other tutorial I used.

[c00perzz]

First you have to specify the styling of four divs in <head><style></style></head>:

1) The background div
2) The popup div
3) The button div
4) The close bt div

Background div:

Code

#popupback {
    background: none repeat scroll 0 0 #000;
    display: none;
    left: 0;
    top: 0;
    margin: 0;
    min-height: 900px;
    opacity: 0.6;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}

Popup message div:

Code

#popup {
    background-color: #F5F5F5;
    border-radius: 8px 8px 8px 8px;
    display: none;
    left: 33%;
    position: fixed;
    text-align: center;
    top: 40%;
    width: 404px;
    z-index: 999;
}

Button div:

Code

#button {
    width:100px;
    height: 25px;
    background-color:#000;
    color: #FFF;
    text-align:center;
}

Close div:

Code

#close {
    position:absolute;
    top:0;
    right:0;
    z-index: 999;
    cursor:pointer;
}

Then you have to put those divs in the HTML of your document.

Code

<div id="popupback"></div>
<div id="popup">HERE PUT THE CONTENT OF THE POPUP<div id="close">X</div></div>

Then create the button and place it in <body></body>

Code

<div id="button ">CLICK</div>

Finally at the bottom of your page before </body> you have to add the javascript for the button

Code

$('#button').on("click",function() {
    $('#popupback').slideToggle();    
    $('#popup').slideToggle();        
});
$('#close').on("click",function() {
    $('#popupback').slideToggle();    
    $('#popup').slideToggle();        
});

Heres completed:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup demo HF by c00perzz</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style>
#popupback {
    background: none repeat scroll 0 0 #000;
    display: none;
    left: 0;
    top: 0;
    margin: 0;
    min-height: 900px;
    opacity: 0.6;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}
#popup {
    background-color: #F5F5F5;
    border-radius: 8px 8px 8px 8px;
    display: none;
    left: 33%;
    position: fixed;
    text-align: center;
    top: 40%;
    width: 404px;
    z-index: 999;
}
#button {
    width:100px;
    height: 25px;
    background-color:#000;
    color: #FFF;
    text-align:center;
}
#close {
    position:absolute;
    top:0;
    right:0;
    z-index: 999;
    cursor:pointer;
}
</style>
</head>

<body>
<div id="popupback"></div>
<div id="popup">
HERE PUT THE CONTENT OF THE POPUP
<div id="close">X</div>
</div>

<div id="button">CLICK</div>
<script type="text/javascript">
//open modal on click
$('#button').on("click",function() {
    $('#popupback').slideToggle();    
    $('#popup').slideToggle();        
});
//close modal on X
$('#close').on("click",function() {
    $('#popupback').slideToggle();    
    $('#popup').slideToggle();        
});
</script>
</body>
</html>

i did it quite fast, i think it should work fine. Feel free to customize it as you like, it should give you an idea how it works.