jquery ui 对话覆盖未显示

Question

我在我的 asp.net mvc 应用程序 中使用 jquery ui 对话。
我只是复制了与ui dialogues相关的样式并修改/定制了它们。
我为叠加层添加了以下样式:

 .ui-widget-overlay
 {
     background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
     opacity: .5;
     filter: Alpha(Opacity=50);
 }

我看到那张图片就在那条路上。
和对话的模态:设置为 true 但我没有看到覆盖。
我正在使用 jquery-ui-1.10.0。

这是我的CSS:

body {font-family:Verdana, Geneva, sans-serif !important; font-size: 11px; background-color:#250A2F !important; color: #D4D4D4; line-height:20px;} 

p {font-family:Verdana, Geneva, sans-serif !important; font-size: 13px; color: #D4D4D4 !important;} 
em {font-family:Verdana, Geneva, sans-serif !important; font-size: 11px; color: #D4D4D4 !important;} 
textarea {font-family:Verdana, Geneva, sans-serif !important; font-size: 11px; color: #777 !important;} 

span {font-family:Verdana, Geneva, sans-serif !important; font-size: 11px; color: #D4D4D4 !important;} 


input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="range"]:focus
{
outline:none;
}

h1 {font-family:Verdana, Geneva, sans-serif; font-size: 20px; color:#D4D4D4 !important; font-weight:normal !important;} 
h2 {font-family:Verdana, Geneva, sans-serif; font-size: 14px; color:#D4D4D4 !important; font-weight:normal !important;} 
h3 {font-family:Verdana, Geneva, sans-serif; font-size: 12px; color:#D4D4D4 !important; font-weight:normal !important;} 
h4 {font-family:Verdana, Geneva, sans-serif; !important} font-weight:normal !important; 
h5 {font-family:Verdana, Geneva, sans-serif; !important font-weight:normal !important;} 
h6 {font-family:Verdana, Geneva, sans-serif; !important font-weight:normal !important;} 


.main-box{/*width:460px;*/ margin:10px 0 0 0; /*border-bottom:1px solid #262626;*/}
.main-box p{font-family:Arial, Helvetica, sans-serif !important;}

.hd{background-color:#4d4d4d; padding:3px 5px; font-size:13px;}
.table-main{/*border:1px solid #4d4d4d; width:458px;*/}
.table-main p{padding:10px 0 0 10px; font-size:1em; font-family:Arial, Helvetica, sans-serif !important;}

.up-main{padding:10px 10px 2px 10px; border-bottom:1px solid #4d4d4d;}
.user-div{width:190px !important; float:left;}

.user-div-2{width:190px !important; float:left; margin:0 0 0 41px;}


.user-fld{width:354px !important; margin:0 0 0 10px; float:left;}
.user-fld input{width:338px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; /* padding:0 8px; */}



.user-fld select{width:354px; background-image:url(../images/dropdown.png); background-repeat:repeat; border-bottom:1px solid #fff; padding:0 0 7px 0; border-left:none; border-right:none; border-top:none;}



.user-fld-2{width:190px !important; margin:0 0 5px 0 !important;}
.user-fld-2 input{width:168px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; 
outline:none !important;}


.user-fld-3{width:200px !important; margin:0 0 5px 0; font-family:Arial, Helvetica, sans-serif !important;}

.user-fld-3 input{width:168px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-family:Arial, Helvetica, sans-serif !important;}

.user-fld-3 select{width:181px !important; margin-bottom:0px !important; height:29px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-family:Arial, Helvetica, sans-serif !important;}

.login-dv{text-align:center; padding:5px;}

.clear-n{clear:both;}

.scnd-dv{margin:7px 0 0 0; padding:10px;}

.inner-txt{margin:0px 0 0 0;}

.txt-in{float:left; width:190px; text-align:left; padding:0 0 5px 10px; font-size:12px;}
.txt-in-2{float:left; width:190px; text-align:left; padding:0 0 5px 10px; font-size:12px; margin:0 0 0 33px;}


.main-tble{margin:0; padding:0;}
.main-tble p{padding:0; margin:0;}


.inner-new-box{
    position: relative;
    border-radius:4px 4px 4px 4px;
    padding:15px;
    background: none;
    overflow: auto;
    color:#ffffff;
    background:none repeat scroll 0 0 #0E0E0E;
    margin:10px 0 0 0;
}

.buttons-main{font-size:12px; color:#000; text-align:center; border-top:1px solid #4d4d4d; padding:20px 0 0 0;}
.buttons-main input{padding:5px 8px; color:#000; cursor:pointer;}
.close-btn{float:right;}

.ui-button .ui-button-text {
    display: block;
    line-height: normal;
}
.ui-button-text-only .ui-button-text {
    padding: .4em 1em;
    color:#000 !important;
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
}
.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-dialog .ui-dialog-content h2{
    border-bottom:1px solid #262626;
    font-size:22px;
    font-weight:normal !important;
    padding:0 0 10px 0;
    margin-bottom:0;
    }


.ui-dialog .ui-dialog-buttonpane {
    text-align:center;
    background-color:#0E0E0E;
    border-radius:4px;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: -7px;
    padding: .3em 1em .5em 1.4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    /*float: right;*/
    border-top: 1px solid #262626;
    height: 39px;
    margin: 9px 0 0;
    padding: 4px 0 0;
    text-align: center;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
    border-radius:2px;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}

.popup-dv{display:none; color:#FFF;}

.up-content{ /*height:340px;*/ /*width:460px;*/ /*overflow:auto;*/}
.up-content h2{font-size:22px; font-weight:normal !important; border-bottom:1px solid #262626; padding:0 0 10px 0;}
.up-content p{font-size:13px; color:#FFF; line-height:18px; padding:10px 0;}


.social-icons{height:39px; /*width:460px;*/ border-top:1px solid #262626; padding:20px 0 0 0; text-align:center; margin:9px 0 0 0;}
.social-icons img{margin:0 20px 0 0;}




.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: text;
    background-color:#333;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
    background-color:#1c1c1c;
    color:#FFF;
    border:none;
    font-weight:normal;

}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
    color:#FFF !important;
}.ui-tabs {
    position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    font-size:14px;
    float: left;
    position: relative;
    top: 0;
    /*margin: 1px .2em 0 0;*/
    border-bottom: 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
/*  margin-bottom: -1px;
    padding-bottom: 1px;*/
    border:none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: text;
    background-color:#333;
}


.lft-txt{float:left; font-size:14px;}
.lft-txt span{padding:0 0 0 50px; font-size:14px;}

.pass-txt{float:left; font-size:14px;}
.pass-txt span{padding:0 0 0 21px; font-size:14px;}

.login-txt{float:left; font-size:14px;}
.login-txt span{padding:0 0 0 30px; font-size:14px;}


.make-txt{float:left; font-size:14px; width:135px;}
.make-txt span{padding:0 0 0 50px; font-size:14px;}

.new-fld{width:390px !important; margin:0 0 0 10px; float:left;}
.new-fld input[type="text"]{width:354px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-size:14px; /*padding:0 8px;*/}
.new-fld textarea{background-color:transparent !important; border:1px solid #FFF; width:368px !important; height:200px;}


.user-div{width:190px !important; float:left;}

.user-div-2{width:190px !important; float:left; margin:0 0 0 41px;}

.flds-up{margin:0px 0 10px 0;}



.hd-a{float:left; display:block;}



.main-dv{font-size:14px; margin:20px 0 0 0;}
.forgt{float:left; margin:0 30px 0 0;}
.frgt-btn{float:left;}
.frgt-btn input{cursor:pointer;}


.btm-main{float:left; font-size:14px; margin:0 30px 10px 0;}
.btm-inner-lft{float:left; width:135px; margin:0 10px 0 0;}
.btm-inner-fld{float:left;}
.btm-inner-fld input{background-color:transparent !important; border:none; border-bottom:1px solid #FFF; color:#FFF;}

在页面中我有这些样式:

  <style>
        .ui-dialog-titlebar-close
        {
            visibility: hidden;
        }
    </style>
    <style type="text/css">
        .transparent, .ui-dialog-buttonpane
        {
            background: transparent; /* z-index: 1000;*/
        }

        .ui-widget-overlay
        {
            background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
            opacity: .5;
            filter: Alpha(Opacity=50);
        }

        .ui-widget-content
        {
            width: auto !important;
            border: none;
        }
        /* .ui-widget
        {
            width: auto !important;
        }*/

        #tabs
        {
            border: none;
        }

        #tabs .ui-widget-header
        {
            background: transparent !important;
            border-top: none;
            border-right: none;
            border-left: none;
            border-bottom: 1px solid #262626;
            border-top: none;
            padding-bottom: 10px;
        }

        #tabs .ui-tabs
        {
            padding: 0 !important;
            margin-top: 40px;
            position: relative;
        }

        #tabs .ui-tabs .ui-tabs-nav
        {
            padding: 0 !important;
            position: absolute;
            margin: -32px -1px 0;
        }

        a:link
        {
            text-decoration: underline;
            color: White;
        }
        a:visited
        {
            text-decoration: none;
        }
        a:active
        {
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: none;
            color: Gray;
        }

        a img
        {
            border: 0;
        }
    </style>

js代码是这样的:

$("#151").dialog({
                autoOpen: false,

                autoResize: true,

                buttons: [
                    {
                        text: "Login",
                        click: function () {
                           $("#Tutorial").dialog("open");
                            //$(this).dialog("close");
                        }
                    },

                ]
            });
            // Link to open the dialog
            $("#151-link").click(function (event) {

                $(".ui-dialog-titlebar").hide();
                $("#151").dialog({ dialogClass: 'transparent' });
                $("#151").dialog("open");

                event.preventDefault();
            });

你能建议我解决这个问题吗？

Answer 1

我添加了这三个类:

.ui-widget-overlay
    {
        background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
        opacity: .5;
        filter: Alpha(Opacity=50);
    }

    .ui-widget-overlay {
background: url("images/ui-bg_diagonals-thick_20_666666_40x40.png") repeat scroll 50% 50% #666666;
opacity: 0.5;

.ui-widget-overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.ui-front {
    z-index: 100;
}

并设置 modal:true 并且它起作用了。谢谢@axrwkr