<input type="button" value="確認預約" id="btnconfirm" onclick="javascript:openconfirmDlg();" />
<div id="confirmd">
<p>請選擇確認結果：</p>
<p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>
<input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失敗</label></p>
</div>
<script type="text/javascript">
$("#confirmd").dialog({
title: '預約確認',
iconCls: 'icon-save', resizable: false, modal: true, closed: true,
width: 200, height: 200,
buttons: [{ text: '提 交', handler: function () {
alert("ok");
}
}, { text: '取 消', handler: function () {
$("#confirmd").dialog("close");
}
}]
});
function openconfirmDlg() {
$("#confirmd").dialog("open");
}
</script>
可以看到幾個問題，一是遮罩層沒有全部蓋住網頁內容，二是對話框不見了，當然不是真的不見了，而是顯示到了頁面的上方，需要將滾動條拖回到項端方可見到，造成這樣的原因很清楚，一是獲取網頁內容高度不正確，只是得到了window的高度（即可視高度），才會出現遮罩不完整，二是定位不正確，未能正確識別到scrollTop，造成對話框定位不準，針對這些問題，我做出了相應的改進，從而解決了該問題，下面是改進后的代碼：
<input type="button" value="確認預約" id="btnconfirm" onclick="javascript:openconfirmDlg();" />
<div id="confirmd">
<p>請選擇確認結果：</p>
<p><input type="radio" value="True" id="rtrue" name="rresult" class="rresult" /><label for="rtrue">成功</label>
<input type="radio" value="False" id="rfalse" name="rresult" class="rresult" /><label for="rfalse">失敗</label></p>
</div>
<script type="text/javascript">
$("#confirmd").dialog({
title: '預約確認',
iconCls: 'icon-save', resizable: false, modal: true, closed: true,
width: 200, height: 200,
buttons: [{ text: '提 交', handler: function () {
alert("ok");
}
}, { text: '取 消', handler: function () {
$("#confirmd").dialog("close");
}
}]
});
window.onscroll = function () {
$("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 });
}
function openconfirmDlg() {
$("#confirmd").dialog("open");
$("#confirmd").dialog("move", { top: $(document).scrollTop() + ($(window).height() - 200) * 0.5 });
$(".window-mask").css({ height: $(document).height()});
}
</script>
