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

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

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

Answer 1

jQuery-ui-dialog只是在幕后运行一堆JavaScript代码，给出了一个对话框的外观。

您可以使用CSS完成许多相同的功能。

我不打算告诉你完全这里要做什么，但我会指出你的方向。

对于初学者，您可以创建一个包含对话框内容的div。将其标识为dialog。

然后，在CSS中，为其提供position:fixed和display:none以及z-index:9999以及您想要的宽度和高度。确切地知道它的大小，您可以编写JavaScript代码将其置于屏幕中心。如果要显示对话框，请将其display属性设置为block。另外，一定要给它一个背景颜色和边框。这将允许您为文档的一部分提供类似对话框的外观。

如果您希望在对话框后面有一个“掩码”，以便用户无法点击页面上的任何其他内容，请创建另一个ID为mask的div。为其提供以下CSS属性：position:fixed，top:0px，left:0px，height:100%，width:100%，display:none背景颜色：黑色{{1} } z-index：9998 ,不透明度：0.8 ,同时显示. When you want to display the dialog as modal, set this div's阻止。

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

快乐的编码！

自定义确认对话框

1 个答案: