javascript - 自定义确认对话框

Question

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

现在我通常会使用 JQuery 并将模态设置为 true 以启用 false/true 来分配，但我没有 jquery 的奢侈。有没有办法使用这个自定义对话框？

有没有办法不用 JQuery 来实现以下功能？

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

Answer 1

jQuery-ui-dialog 只是在幕后运行一堆 JavaScript 代码来提供对话框的外观。

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

我不会告诉您确切在这里要做什么，但我会为您指明大体方向。

对于初学者，您可以创建一个包含对话框内容的 div。给它 id dialog。

然后，在 CSS 中，给它 position:fixed 和 display:none 和 z-index:9999 以及宽度和高度你想要。确切知道它的大小是多少，您可以编写 JavaScript 代码使其在屏幕上居中。当您想显示对话框时，将其 display 属性设置为 block。另外，一定要给它一个背景颜色和一个边框。这将使您的文档的一部分看起来像一个对话框。

如果您希望在对话框后面有一个“掩码”以便用户无法单击页面上的任何其他内容，请创建另一个 ID 为 mask 的 div。给它这些 CSS 属性:position:fixed, top:0px, left:0px,height:100% , 宽度:100%, display:nonebackground-color:black,z-index:9998,不透明度:0.8。当您想以模态方式显示对话框时，将此 div 的display属性也设置为block`。

最后，jQuery-ui-dialog 还捕获 [Tab] 键按下以将键盘焦点保持在模态对话框内。如果您愿意，也可以随意这样做。

编码愉快!