jQuery 닫기 대화 상자

Question

어떤 이유로 나는이 코드를 팝업처럼 보여줄 수 있습니다.

<div id="myDialog" title="myTitle"> 
    <div class="table_cell"> 
    <div class="message"></div> 
    </div> 
    <div class="table_cell" onclick="doMyThing(<?php echo $id; ?>)"> 
    <span style="cursor:pointer">Accept</span> 
    </div> 
</div> 

나는 자바 스크립트 몇 가지 이벤트가 발생

는 다음 코드가 실행됩니다 :이 그냥 잘 작동

$(document).ready(function() { 
    $('#myDialog').dialog(); 
    $('.message').html("Some text"); 
}); 

. 하지만, 내 스팬 필드를 클릭 한 후 대화 상자를 숨기거나 닫아야합니다. $('#myDialog').dialog('close');과 같은 것을 시도했지만 작동하지 않습니다. 또한 'myDialog'에서 처음 시도 할 때 display: block을 시도한 다음 display: none을 입력하려고 시도했지만 대화 상자가 계속 화면에 표시됩니다.

이 'myDialog'는 실제로 CSS에서 일부 스타일을 수신하고 있습니다. 그래서 이처럼 가짜 대화를 코딩하고 있습니다. 어떤 제안?

Answer 1

이 잘 나는 마지막으로 jQuery를 버튼을 사용하고 모양을 변경했습니다. 거기에 CSS 클래스를 사용하려고했지만 작동하지 않았습니다.

$(document).ready(function() { 
      $('.message').html("Some text"); 
      $('#myDialog').dialog({ 
       modal: true, 
       buttons: { 
        'accept': { 
         style:'background:#D1040E; color: #DADADA', 
         text: 'Accept', 
         click: function() { 
          doMyThing(<?php echo $id; ?>); 
          $(this).dialog('close'); 
         } 
        }, 
        'cancel': { 
         style:'background:#D1040E; color: #DADADA', 
         text: 'Cancel', 
         click: function() { 
          $(this).dialog('close'); 
         } 
        } 
       } 
      }); 
     }); 

Answer 2

.dialog('close') 잘 작동합니다. 스팬을 적절하게 참조하십시오.

<div id="myDialog" title="myTitle"> 
    <div class="table_cell"> 
    <div class="message"></div> 
    </div> 
    <div class="table_cell" onclick="doMyThing(<?php echo $id; ?>)"> 
    <span id='accept' style="cursor:pointer">Accept</span> 
    </div> 
</div> 

$(document).ready(function() { 
    $('#myDialog').dialog(); 
    $('.message').html("Some text"); 
    $('#accept').on('click', function(){ 
     $('#myDialog').dialog('close'); 
    }) 
}); 

FIDDLE HERE

Answer 3

당신은 당신의 자신의

jQuery를 만드는 대신 제공된 버튼을 사용할 수 있습니다

$(document).ready(function() { 
    $("#mydialog").dialog({ 
     modal: true, 
     buttons: { 
     "Accept": function() { 
       doMyThing(<?= $id ?>); 
       $(this).dialog("close"); 
      } 
     } 
    }) 
}); 

HTML :

<div id="myDialog" title="myTitle"> 
<div class="table_cell"> 
    <div class="message"></div> 
</div> 
</div> 

,

당신은 여기에 적절한 문서를 확인할 수 있습니다 http://jqueryui.com/dialog/#modal-confirmation

Answer 4

확인 Link Here

<div id="dialog-confirm" title="Empty the recycle bin?"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

<script> 
    $(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 
    </script>