创建javascript弹出窗口的最优雅方法

most elegant way to create a javascript popup?

本文关键字：方法 窗口 javascript 创建      更新时间：2023-09-26

是否有更优雅的方法来创建JavaScript弹出窗口？

<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有一个非常好用的模式对话框插件。 
<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>

最简单的纯html/css。

使用details元素切换功能和选择器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>

取决于您想要实现的目标。。。你可以看看模态对话的表格。

jQuery就是这样做的http://jqueryui.com/demos/dialog/例如。

这就是我打开模式对话框的方式

function showModalDialog() {
        window.showModalDialog('HizmetSuresiUzatma.aspx', 
                               '', 
                               'resizable: no; 
                                scroll: No; 
                                dialogWidth:640px; 
                                dialogHeight:350px');
     }

在一个名为HizmetListesi.aspx的页面上点击一个按钮后。我在aspx文件上写下JS代码，然后用调用它

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hizmetYenileTahsilat", "showModalDialog()", true);

在aspx.cs文件上。

一个良好的工作代码，没有崩溃

简单且使此代码更好的是，您可以在JavaScript文件中单独使用它，并将其简化为多个具有相同弹出大小的文件，即使弹出窗口上的页面不同。

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>

注意：您也可以将其用作主体中的onload，例如<body onload="JavaScript:MyPopUp('MyDirectory/Page.html');">，它也适用于onmouseover和其他。。。尽管我不建议这样做，除非你想激怒访问你页面的客户。

使用Dialog的现代方式，Dialog是一个新的本地HTML元素，它简化了对话框提示(如弹出窗口和模式(的创建。内置浏览器功能，如焦点管理、标签跟踪和保持堆叠上下文。

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

相关文章：