关闭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>

当我使用JavaScript触发某些事件时，将执行下一个代码：

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

这很好。 虽然，我需要在单击跨度字段后隐藏/关闭对话框。 我已经尝试过像$('#myDialog').dialog('close'); 但它不起作用。 此外，尝试使“ myDialog”在第一次单击时display: block ，然后display: none ，但对话框仍然在屏幕上保留。

这个“ myDialog”实际上是从CSS接收某种样式的，这就是为什么我要像这样编写一个假对话框。 有什么建议么？

Answer 1

您可以使用提供的按钮来代替自己制作的按钮

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 2

在这里检查链接

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

Answer 3

.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');
    })
});

在这里

Answer 4

好吧，我终于使用了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' );
                        }
                    }
                }
            });
        });