2 
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 并将 modal 设置为 true 以启用 false/true 分配，但我没有 jquery 的奢侈。有没有办法使用这个自定义对话框？

有没有办法在没有 JQuery 的情况下执行以下操作？

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

1 回答 1

1

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

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

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

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

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

如果您想在对话框后面有一个“掩码”，以便用户无法单击页面上的任何其他内容，请使用 id 创建另一个 div mask。给它这些 CSS 属性：position:fixed, top:0px, left:0px, height:100%, width:100%, display:nonebackground-color:black ,z-index:9998 ,opacity:0.8 . When you want to display the dialog as modal, set this div'sdisplay property toblock`。

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

快乐编码！

于 2012-05-10T19:40:51.490 回答