定制确认对话框

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，以启用假/真分配，但我没有这个jquery的奢侈品。有没有办法使用这个自定义对话框？

有没有办法做到以下没有JQuery？

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

Answer 1

jQuery的-UI-对话框只运行了一堆幕后的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背景色：黑色,的z-index：9998 ,不透明度：0.8 . When you want to display the dialog as modal, set this div's显示property to block`为好。

最后，jQuery-ui-dialog还捕获[Tab]按键以保持模式对话框内的键盘焦点。如果你愿意，也可以自由地做到这一点。

快乐编码！