+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: onclick Help (/showthread.php?tid=4560145)
onclick Help - Multin - Nov 28, 2014
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™ - Nov 28, 2014
(Nov 28, 2014 05:36 PM)Multin Wrote: 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 - Nov 28, 2014
(Nov 28, 2014 05:42 PM)Crypto™ Wrote: 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 - Nov 30, 2014
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.