jQuery-UI 모달 오버레이

Question

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; 
} 

자바 스크립트 : 오버레이 전체 창을 포함하지 않는 이유

$(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!'); 
} 

누군가가 나에게 설명해 주시겠습니까 .

Answer 1

나는 JQuery와 - UI에 익숙하지 해요,하지만 당신은 개발자 도구 통해 구글 크롬에 오버레이 레이어를 선택하면, 당신은 그 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; 
} 

ONLINE DEMO.