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有一个很棒的modal dialog插件，易于使用。

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

取决于你想要实现的目标......你可以看看模态对话形式。

jQuery执行此操作http://jqueryui.com/demos/dialog/。

Answer 4

这就是我打开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文件上。

Answer 5

没有崩溃的好工作代码。

简单和使这段代码变得更好的原因是你可以单独在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 6

最简单的纯 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>

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

6 个答案: