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を使用し、モーダルをtrueに設定して、false / trueを割り当てることができるようにしますが、これにはjqueryの贅沢はありません。このカスタムダイアログを使用する方法はありますか？

JQueryなしで次のことを行う方法はありますか？

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

1 に答える 1

1

jQuery-ui-dialog は、一連の JavaScript コードをバックグラウンドで実行して、ダイアログ ボックスの外観を提供します。

CSS を使用して、同じ機能の多くを実現できます。

ここで何をすべきかを正確に説明するつもりはありませんが、一般的な方向性を示します。

divまず、ダイアログ ボックスのコンテンツを含む を作成できます。id を付けdialogます。

次に、CSS で、必要な幅と高さとともにposition:fixedand display:noneandを指定します。z-index:9999そのサイズが正確にわかっていれば、画面の中央に配置する JavaScript コードを記述できます。ダイアログを表示するには、そのdisplayプロパティをに設定しますblock。また、必ず背景色と境界線を付けてください。これにより、ドキュメントの一部にダイアログ ボックスのような外観を与えることができます。

ダイアログボックスの背後に「マスク」を配置して、ユーザーがページ上の他のものをクリックできないようにする場合は、 id で別の div を作成しますmask。次の CSS プロパティを指定します: , , , , position:fixedbackground top:0px- left:0pxcolor height:100%: black z-index:9998 opacity:0.8 display block` も。width:100%display:none,,. When you want to display the dialog as modal, set this div'sproperty to

最後に、jQuery-ui-dialog は [Tab] キーの押下もキャプチャして、キーボード フォーカスをモーダル ダイアログ内に保持します。こちらもお好みでどうぞ。

ハッピーコーディング！

于 2012-05-10T19:40:51.490 に答える