Open/Close Popup ButtonCode: <html>
<head>
<script language="Javascript" type="text/javascript">
<!-- Hide Script from Old Browsers
newWindow = null;
thisopen = 0;
function openWindow() {
if (thisopen == 0)
{
MusicWindow = window.open("http://YOUR_URL_HERE", "Music", "width=300,height=450,resizable=no,scrollbars=no,toolbar=no,menubar=no");
MusicWindow.focus();
document.form.Button.value = "Close Player";
} else {
if (MusicWindow && !MusicWindow.closed) {
MusicWindow.close();
document.form.Button.value = "Open Player";
}
}
thisopen = 1- thisopen;
}
// End hiding script from old browsers -->
</script>
</head>
<body>
<form name="form">
<input type="button" name="Button" value="Open" onClick="openWindow()">
</form>
</body>
</html>
Open/Close Modal
Since it's no longer 2006, I just wanted to point out that it's also pretty common to want to create a popup modal. While there are millions of examples out there, here's a simple way to do it.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Example</title>
<script type="text/javascript">
function toggleModal()
{
var element = document.getElementById('modal_overlay');
element.className = (element.className == 'modal_overlay') ? 'modal_overlay hidden' : 'modal_overlay';
}
</script>
</head>
<body>
<input type="button" onClick="toggleModal();" value="Click Me"/>
<div id="modal_overlay" class="modal_overlay hidden">
<div id="backdrop" onClick="toggleModal();"><div>
<div id="modal">Hello</div>
</div>
</body>
</html>
...and here's some CSS to make it all work. (Throw it in the <head> tag if you're confused.)
Code:
<style>
.modal_overlay, #backdrop{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity:1.0;
z-index:10;
-webkit-transition: all .15s;
-moz-transition: all .15s;
transition: all .15s;
}
#backdrop{
background-color:rgba(0,0,0,0.3);
}
div.modal_overlay.hidden{
opacity:0.0;
z-index:-1;
-webkit-transition: all .15s;
-moz-transition: all .15s;
transition: all .15s;
}
#modal{
position:relative;
margin:0 auto;
height:300px;
width:400px;
padding:25px;
background-color:#FFF;
top:100px;
-webkit-transition: all .15s;
-moz-transition: all .15s;
transition: all .15s;
}
div.modal_overlay.hidden #modal{
top:-100px;
-webkit-transition: all .15s;
-moz-transition: all .15s;
transition: all .15s;
}
</style>
Thanks for sharing, Rthprog.
I'm disappointed to see that this thread never gained some more momentum, but your post is a step in the right direction! Good for you.
If you're going to use vendor-specific prefixes for CSS transitions then -o-transition would be much appreciated.
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.
»
Go to Registration page
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
