简体   繁体   English

jQuery-UI模态覆盖

[英]jQuery-UI Modal overlay

Working with jQuery-UI, I created a 3 button alert for a game I built to add difficulties to it. 使用jQuery-UI,我为自己制作的游戏创建了3按钮警报,以增加难度。

When I started writing the script for the alert, the overlay worked fine but now for some reason, it doesn't cover a horizontal strip under the dialog. 当我开始为警报编写脚本时,覆盖层可以正常工作,但是由于某种原因,它并未覆盖对话框下方的水平条。 I am not sure if it's the javascript or the CSS doing this but I need to keep both of them as it is with the full overlay. 我不确定是使用JavaScript还是CSS,但是我需要将它们全部保留为完整覆盖。

jsFiddle example: http://jsfiddle.net/spedwards/dJVF3/ jsFiddle示例: http : //jsfiddle.net/spedwards/dJVF3/

CSS: 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: 使用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!');
}

Could someone please explain to me why the overlay doesn't cover the whole window. 有人可以向我解释为什么覆盖层不能覆盖整个窗口。

I'm not familiar with jquery-ui, but if you check the overlay layer on Google Chrome via Developer Tools , you'd see the that jquery-ui applies a white background image to .ui-widget-overlay which is repeated horizontally: 我不熟悉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);
}

So, you could fix that by overriding the background property as follows: 因此,您可以通过重写background属性来解决此问题,如下所示:

.ui-widget-overlay {
    background: #aaa !important;
}

ONLINE DEMO . 在线演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM