js弹出窗口代码大全(详细整理)

JavaScript弹出窗口经常被用于在页面中显示重要信息或提供用户交互。本文将详细介绍JS弹出窗口的各种用法和代码示例。

alert弹窗

alert弹窗是JS中最常见的弹窗形式，它用于在页面中显示一段提示信息，用户需要点击确认按钮才能继续操作。

alert("这是一个alert弹窗！");

confirm弹窗

confirm弹窗用于在页面中显示一段提示信息，并且包括确认和取消两个按钮，用户根据需要可以选择不同的操作。

if(confirm("你确定要删除吗？")){
    // 确认删除操作
}else{
    // 取消操作
}

prompt弹窗

prompt弹窗用于在页面中显示一个可编辑的文本框，用户可以在文本框中输入内容，然后选择确认或取消。

let name = prompt("请输入您的名字","");
if(name != null && name !== ""){
    // 用户输入的名称不为空
}else{
    // 用户没有输入名称
}

showModalDialog弹窗

showModalDialog弹窗可以用于在页面中显示模态对话框。模态对话框会阻止用户操作页面上的其他元素，直到用户选择确认或取消。

showModalDialog("dialog.html", dialogArguments, "dialogWidth: 400px; dialogHeight: 300px");

window.open弹窗

window.open弹窗可以用于在新窗口中打开一个链接。可以设置窗口的大小、位置、工具栏、状态栏等属性。

window.open("http://www.example.com", "example", "width=500, height=400, toolbar=no, status=no");

自定义弹窗

除了上述的几种弹窗形式外，开发者还可以自定义JS弹窗。可以使用CSS和JS来控制弹窗的样式和行为。

<div id="myDialog" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;">
    <h3>提示信息</h3>
    <p>这是一段自定义的提示信息！</p>
    <button onclick="closeDialog()">关闭窗口</button>
</div>
<button onclick="showDialog()">显示窗口</button>
<script>
function showDialog(){
    let dialog = document.getElementById("myDialog");
    dialog.style.display = "block";
}
function closeDialog(){
    let dialog = document.getElementById("myDialog");
    dialog.style.display = "none";
}
</script>

以上是JS弹出窗口的各个代码示例。开发者可以根据具体需求选择不同的弹窗形式，并进行进一步的定制化。