色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery dialog 透明

阮建安2年前7瀏覽0評論

jQuery Dialog是一種非常常用的UI元素,在許多Web應用中都有使用到。而在一些特殊需求下,我們需要將Dialog的背景設置為透明色,以達到更好的視覺效果。下面就來介紹如何實現Dialog透明背景。

$(function(){
var $dialog = $('#your-dialog');
var dialogColor = $dialog.css('background-color'); //獲取背景色
$dialog.dialog({
modal:true,
autoOpen:false,
closeOnEscape:true,
width:400,
height:300,
open:function(){
$('.ui-widget-overlay').css('background-color','rgba(0,0,0,0.7)'); //設置背景色透明
$dialog.parent().css('position','fixed').css('top','50%').css('left','50%').css('margin-top','-'+($dialog.parent().outerHeight()/2)+'px').css('margin-left','-'+($dialog.parent().outerWidth()/2)+'px');
},
close:function(){
$('.ui-widget-overlay').css('background-color','transparent'); //恢復背景色
}
});
$('#your-button').click(function(){
$dialog.dialog('open');
});
});

以上代碼中,我們使用了jQuery的CSS方法,通過設置樣式屬性background-color來實現Dialog的透明背景效果。

在Dialog的open函數中,我們首先獲取了Dialog的背景色,然后通過選擇器選中該Dialog的遮罩層元素.ui-widget-overlay。我們將遮罩層的背景色設置為rgba(0,0,0,0.7),即黑色的透明色,實現透明背景效果。同時,我們還對Dialog的父元素進行了一系列樣式設置,使其居中在頁面中。

對于Dialog的close函數,我們則需要將遮罩層背景色恢復原來的背景色transparent。

通過以上方法,我們就可以很容易地實現Dialog的透明背景效果了。