[英]jQuery-UI Modal overlay
使用jQuery-UI,我為自己制作的游戲創建了3按鈕警報,以增加難度。
當我開始為警報編寫腳本時,覆蓋層可以正常工作,但是由於某種原因,它並未覆蓋對話框下方的水平條。 我不確定是使用JavaScript還是CSS,但是我需要將它們全部保留為完整覆蓋。
jsFiddle示例: http : //jsfiddle.net/spedwards/dJVF3/
CSS:
p {
text-align: center;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
.ui-dialog-titlebar.ui-widget-header {
background: #104f96; /* Old browsers */
background: -moz-linear-gradient(top, #104f96 0%, #157dd3 45%, #54abee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#104f96), color-stop(45%,#157dd3), color-stop(100%,#54abee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #104f96 0%,#157dd3 45%,#54abee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #104f96 0%,#157dd3 45%,#54abee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #104f96 0%,#157dd3 45%,#54abee 100%); /* IE10+ */
background: linear-gradient(to bottom, #104f96 0%,#157dd3 45%,#54abee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#104f96', endColorstr='#54abee',GradientType=0 ); /* IE6-9 */
}
div.ui-widget-content {
background: #74bbf2;
}
.ui-widget-content, .ui-dialog-titlebar.ui-widget-header {
border: 1px solid #fff;
}
.ui-state-default {
border: 1px solid #fff !important;
background: #539ff5 !important;
background: -moz-linear-gradient(top, #539ff5 0%, #78bef8 50%, #6cb7f8 51%, #add9fb 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#539ff5), color-stop(50%,#78bef8), color-stop(51%,#6cb7f8), color-stop(100%,#add9fb)) !important;
background: -webkit-linear-gradient(top, #539ff5 0%,#78bef8 50%,#6cb7f8 51%,#add9fb 100%) !important;
background: -o-linear-gradient(top, #539ff5 0%,#78bef8 50%,#6cb7f8 51%,#add9fb 100%) !important;
background: -ms-linear-gradient(top, #539ff5 0%,#78bef8 50%,#6cb7f8 51%,#add9fb 100%) !important;
background: linear-gradient(to bottom, #539ff5 0%,#78bef8 50%,#6cb7f8 51%,#add9fb 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#539ff5', endColorstr='#add9fb',GradientType=0 ) !important;
}
使用Javascript:
$(function () {
$('.diff').click(function (e) {
e.preventDefault();
$.ui.dialog.prototype._focusTabbable = function(){};
var dialog = $('<p>Select your difficulty</p>').dialog({
resizable: false,
closeOnEscape: false,
width: 350,
modal: true,
dialogClass: "no-close",
draggable: false,
title: 'Difficulty',
buttons: {
"Easy": function () {
easy();
dialog.dialog('destroy');
},
"Normal": function () {
normal();
dialog.dialog('destroy');
},
"Insane": function () {
insane();
dialog.dialog('destroy');
}
},
open: function(e, ui) {
$('button').blur();
}
});
});
});
function easy() {
alert('You selected Easy');
}
function normal() {
alert('You selected Normal');
}
function insane() {
alert('You selected Insane! Good luck!');
}
有人可以向我解釋為什么覆蓋層不能覆蓋整個窗口。
我不熟悉jquery-ui,但是如果您通過Developer Tools檢查Google Chrome上的覆蓋層,則會看到jquery-ui將白色背景圖像應用於.ui-widget-overlay
,並在水平方向重復:
.ui-widget-overlay {
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: .3;
filter: Alpha(Opacity=30);
}
因此,您可以通過重寫background
屬性來解決此問題,如下所示:
.ui-widget-overlay {
background: #aaa !important;
}
在線演示 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.