欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery dialog居中顯示

錢淋西2年前10瀏覽0評論

jQuery Dialog是一款常用于彈窗的插件,因為它可以實現簡單的定制化樣式和行為,讓彈窗的使用更加便捷。而在使用這款插件時,如何使得彈窗居中顯示,也是經常面臨的問題。下面介紹一種簡單的方法實現這個功能。

$(function(){
// 彈窗初始化
$('#dialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 200
});
// 實現居中顯示
$('#dialog').on('dialogopen', function() {
var $dialog = $(this);
var top = ($(window).height() - $dialog.height()) / 2;
var left = ($(window).width() - $dialog.width()) / 2;
$dialog.dialog('option', 'position', {my: 'center', at: 'center', of: window});
});
});

以上代碼先使用了jQuery Dialog的基本配置項,然后在#dialog元素的dialogopen事件中獲取其高寬,并計算出使其居中的距離。最后通過設置dialog的position選項實現居中顯示。這種方法比較簡單,而且不需要過多的CSS樣式修改。

當然,如果需要在彈窗里面加入更多元素以及樣式,就需要更加深入地了解jQuery Dialog的各種選項了。這里只是對居中顯示這個問題做了進一步的解釋。