定製確認對話框

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]按鍵以保持模式對話框內的鍵盤焦點。如果你願意，也可以自由地做到這一點。

快樂編碼！