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

Question

有没有更优雅的方法来创建 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>

Answer 1

jQuery UI 有一个很棒的模态对话框插件，易于使用。

Answer 2

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

Answer 3

没有崩溃的良好工作代码。

简单并且使此代码更好的是，您可以在 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和其他人上工作......虽然我不建议除非您想激怒访问您页面的客户。

Answer 4

最简单的纯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: 10000px #000000d4 solid } 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>

Answer 5

取决于您要实现的目标...您可以查看模态对话 forms。

jQuery 执行此http://jqueryui.com/demos/dialog/示例。

Answer 6

这就是我打开modalDialog的方式

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 弹出窗口的最优雅方式？

问题描述

6 个解决方案

解决方案1
3 已采纳 2011-07-22 08:16:27

解决方案2
2 2011-07-22 08:16:29

解决方案3
0 2017-03-13 21:54:34

解决方案4
0 2021-03-01 22:34:17

解决方案5
0 2011-07-22 08:17:46

解决方案6
0 2011-07-22 08:23:41

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

问题描述

6 个解决方案

解决方案1 3 已采纳 2011-07-22 08:16:27

解决方案2 2 2011-07-22 08:16:29

解决方案3 0 2017-03-13 21:54:34

解决方案4 0 2021-03-01 22:34:17

解决方案5 0 2011-07-22 08:17:46

解决方案6 0 2011-07-22 08:23:41

解决方案1
3 已采纳 2011-07-22 08:16:27

解决方案2
2 2011-07-22 08:16:29

解决方案3
0 2017-03-13 21:54:34

解决方案4
0 2021-03-01 22:34:17

解决方案5
0 2011-07-22 08:17:46

解决方案6
0 2011-07-22 08:23:41