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的各種選項了。這里只是對居中顯示這個問題做了進一步的解釋。