most elegant way to create a javascript popup?
Is there a more elegant way of c开发者_StackOverflow社区reating a JavaScript popup?
<head>
<script>
function myPopup() { window.open( "http://www.google.com", "myWindow", "status=1, height=300, width=300, resizable=0" )
}
</script>
</head>
<body>
<input type="button" onClick="myPopup()" value="popup">
</body>
jQuery UI has a great modal dialog plugin that is easy to use.
<head>
<script>
function myPopup(){
window.open("http://www.google.com", "myWindow",
"status=1,
height=300,
width=300,
resizable=0"
);
}
</script>
</head>
<body>
<input type="button" onclick="myPopup()" value="popup" />
</body>
The simplest, pure html/css.
Using the details element toggling capabilities, and the selector details[open]:
details > p {
padding: 0.5rem;
background: lightcoral;
margin: 0;
display: flex;
flex-direction: column;
}
details[open] {
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
outline: 10px #000000d4 solid;
transition: all 2s linear
}
details[open] summary::after {
content: '❌';
float: right;
}<details>
<summary>Project</summary>
<p>Save project<button>Save to file</button></p>
<p>Publish<button>POST</button></p>
<p>Update<button>Update</button></p>
</details>
<details>
<summary>Another Popup</summary>
<p>Powered by html<input></p>
</details>Depends what you're trying to achieve... you could look at Modal Dialogue forms.
jQuery does this http://jqueryui.com/demos/dialog/ for examples.
That is how I open a modalDialog
function showModalDialog() {
window.showModalDialog('HizmetSuresiUzatma.aspx',
'',
'resizable: no;
scroll: No;
dialogWidth:640px;
dialogHeight:350px');
}
after a button click on a page called HizmetListesi.aspx.I write the JS code on that aspx file then call it with
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hizmetYenileTahsilat", "showModalDialog()", true);
on aspx.cs file.
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
<a href="JavaScript:MyPopUp('MyDirectory/Page.html');" title="My PopUp For You">My PopUp</a>
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
加载中,请稍侯......
精彩评论