most elegant way to create a javascript popup?_问答_开发者

most elegant way to create a javascript popup?

开发者 https://www.devze.com 2023-03-22 09:02 出处：网络

Is there a more elegant way of c开发者_StackOverflow社区reating a JavaScript popup? <head> <script>

相关专题：javascript

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.