jquery ui对话框覆盖未显示

Question

我在我的asp.net mvc application中使用jquery ui dialogue。
我刚刚复制了与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; 
} 

，并设置模式：真正和它的工作。由于@axrwkr