Javascript 自定义确认对话框

jQueryUI对话框只是在后台运行一组JavaScript代码，以显示对话框的外观

您可以使用CSS完成大部分相同的功能

我不会告诉你在这里该做什么，但我会告诉你大致的方向

对于初学者，可以创建一个包含对话框内容的

div

。给它id

对话框

然后，在CSS中，给它

位置：fixed

和

显示：none

和

z-index:9999

以及所需的宽度和高度。确切地知道它的大小，您可以编写JavaScript代码使它在屏幕上居中显示。要显示对话框时，请将其

display

属性设置为

block

。另外，一定要给它一个背景色和边框。这将使您的文档的一部分看起来像一个对话框

如果您希望在对话框后面有一个“掩码”，以便用户不能单击页面上的任何其他内容，请使用id

mask

创建另一个div。赋予它以下CSS属性：

位置：固定的

，

顶部：0px

，

左侧：0px

，

高度：100%

，

宽度：100%

，

显示：无

背景色：黑色z-index:9998

，

不透明度：0.8

。如果要将对话框显示为模态，请将此div的

display

属性也设置为

block`

最后，jQueryUI对话框还捕获[Tab]按键，以将键盘焦点保持在模式对话框内。如果你愿意，也可以这样做

---

快乐编码

当然有,；您只需要编写自己的对话框方法。完成一次之后，就没那么可怕了：-）好吧，我的OpenDialog函数可以工作了。弹出窗口显示的只是我无法使用JQuery将其设置为模态。我必须如上所述，并尝试找出一个自定义对话框脚本。感谢所有的回复！：）@DanielLangdon我在调查你说的话。我有一个面具和弹窗。在你看来，是什么让它成为模态的？HTML或JavaScript中没有“模态”对话框。jQueryTabs用户界面简单地使用JavaScript进行一些技巧，使页面的一部分显示为一个模式对话框。其思想是使用“掩码”覆盖页面，以便在掩码顶部显示弹出对话框时，不能单击任何其他内容。能否请您更详细地描述您的结果，并让我们知道似乎缺少什么？

function deleteRecordDialog() {
    var returnThis;
    var numRecordss = recs.length;
    var html = ""
    /*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">';
    html= html + '<div id="popupInner">';
    html= html + '<div id="popupFrame">';
    html= html + '<div class="margin15px dialog-messages">';*/
    html= html + '<table>';
    html= html + '<tr>';
    html= html + '<td class="warning-icon-cell"></td>';
    html= html + '<td style="padding-left: 5px;">';
    if (numAddresses == 1) {
        html = html + '<p>You have chosen to delete a contact.</p>';
    }
    else {
        html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>';
    }
    html= html + '<p>Are you sure you wish to proceed?</p>';
    html= html + '</td>';
    html= html + '</tr>';
    html = html + '</table>';
    if (numAddresses == 1) {
        html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
    }
    else {
        html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
    }
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    html = html + '</div>';
    OpenDialog(html, 350, 180, false, "Delete Contact")
    return returnThis;
}

$("#dialogInfo").dialog({
    modal: true
});