CODEWITHSUNDEEP
javascript
Steven
Steven

Reputation: 33

most elegant way to create a javascript popup?

Is there a more elegant way of creating 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>

Upvotes: 3

Views: 15934

Answers (7)

XMehdi01
XMehdi01

Reputation: 1

The modern way using Dialog which is a new native HTML element that simplifies creating dialog prompts such as pop-ups and modals. With built-in browser functionality like focus management, tab tracking, and keeping stacking context.

<dialog id="dialog">
    <p>Hi, I'm a dialog.</p>
    <button onclick="dialog.close()">OK</button>
</dialog>
<button onclick="dialog.showModal()">Show the dialog</button>

Upvotes: 1

NVRM
NVRM

Reputation: 13077

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>

Upvotes: 2

SeekLoad
SeekLoad

Reputation: 1089

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.

Upvotes: 0

Paul
Paul

Reputation: 141839

<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>

Upvotes: 2

Bastardo
Bastardo

Reputation: 4152

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.

Upvotes: 0

Brian
Brian

Reputation: 8616

Depends what you're trying to achieve... you could look at Modal Dialogue forms.

jQuery does this http://jqueryui.com/demos/dialog/ for examples.

Upvotes: 0

Clayton
Clayton

Reputation: 5350

jQuery UI has a great modal dialog plugin that is easy to use.

Upvotes: 3

Related Questions