2013-03-26 2 views
1

저는 blockUI를 사용하여 매우 간단한 모달을 작성하여 사용자가 특정 나이인지 묻습니다. 나는 항상 충돌 부분을 피하기 위해 자신의 페이지에 코드 조각을 개발하려고 노력하고있다. 그리고 그것이 내가 여기서 한 일이다. 하나의 간단한 html/javascript 페이지가 있는데 그것은 제대로 작동하지 않습니다.

페이지가로드 될 때마다 정상적으로 나타납니다. 그러나 버튼을 사용하지 않고도 차단 해제를 시도하면 아무 것도하지 않습니다. 로딩 아이콘과 함께 거기에 있습니다.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.blockUI.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // A bit of a work-around. BlockUI tries to center based on location of 
      // the div. By attaching block to the html tag immediately, we avoid 
      // this issue completely. 
      $('html').block({ 
       message: $('#message'), 


       centerX: true, 
       centerY: true, 

       css: { 
        width: '600px', 
        height: '300px', 
        border: '3px solid #FF9900', 
        backgroundColor: '#000', 
        color: '#fff', 
        padding: '25px' 
       } 
      }); 

      $('#over').click(function() { 
       alert('clicked!'); 
       $.unblockUI(); 
       return false; 
      }); 

      $('#under').click(function() { 
       $.unblockUI(); 
       return false; 
      }); 

     }); 
    </script> 
</head> 

<body> 
<div id="message" style="display:none;"> 
    <img src="logo.png" border="0" /> 
    <br /> 
    <h1>Welcome!</h1> 

    You may not view this page unless you are 21 or over.<br /> 

    <button id="over">I am 21 or over</button>&nbsp;&nbsp;&nbsp;<button id="under">Under 21</button> 


</div> 
It's dusty under here! Let me be seen! 
</body> 
</html> 

Chrome의 콘솔에 오류가 표시되지 않아이 문제가 해결되지 않는 이유를 찾을 수 없습니다.

답변

2

$.unblockUI()으로 전화하면 대신 요소에서 호출 해보십시오. $('html').unblock();는 :

<div class="body"> 
    <div id="message" style="display:none;"> 
     <img src="logo.png" border="0" /> 
     <br /> 
     <h1>Welcome!</h1> 
     You may not view this page unless you are 21 or over. 
     <br /> 
     <button id="over">I am 21 or over</button>&nbsp;&nbsp;&nbsp; 
     <button id="under">Under 21</button> 
    </div> 
    It's dusty under here! Let me be seen! 
</div> 

JS는 다음과 같습니다 작업의 예를 참조

$('.body').block({ 
    message: $('#message'), 
    centerX: true, 
    centerY: true, 
    css: { 
     width: '600px', 
     height: '300px', 
     border: '3px solid #FF9900', 
     backgroundColor: '#000', 
     color: '#fff', 
     padding: '25px' 
    } 
}); 
$('#over').click(function() { 
    alert('clicked!'); 
    $('.body').unblock(); 
    return false; 
}); 
$('#under').click(function() { 
    $('.body').unblock(); 
    return false; 
}); 

: http://jsfiddle.net/amyamy86/Taw83/

더 읽기에 대한 요소는 여기 차단 : http://www.malsup.com/jquery/block/#element

+0

I 요소는 실제 초기 팝업 차단 , 그러나 그것을 같은 방식으로 차단 해제한다고 생각하지 않았습니다. 이런! 감사! – Eric