Question

我正在尝试打开一个对话框，请参阅下面的评论：

 var user_ids = $('.user_ids:checked').map(function() {
        return this.value;
    }).get();

 var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Dialog'
    };

尝试了这个但是这不会触发打开对话框

$("#dialog-confirm")
        .dialog(opt)
        .data('uids','user_ids')
        .dialog({
          open: function( event, ui ) {
                alert('do something!');
          },buttons:{
        'Confirm': function() {
           //do something
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
    });

这一个成功打开对话框但我想点击“确认并取消”按钮

$("#dialog-confirm")
    .dialog(opt)
    .data('uids','user_ids')
    .dialog('open');
});

如何使用按钮触发器打开对话框？

Answer 1

根据jQuery UI文档：http://api.jqueryui.com/dialog/#option-buttons
这是在对话框中放置按钮的方式

$(document).ready(function(){

 var user_ids = $('.user_ids:checked').map(function() {
        return this.value;
    }).get();

 var opt = {
        autoOpen: true,
        modal: true,
        width: 300,
        height:300,
        title: 'Dialog'
    };

$( ".selector" )
.dialog(opt)
.data('uids','user_ids')
.dialog({
  buttons: [
    {
      text: "Confirm",
      icon: "ui-icon-heart",
      click: function() {
        console.log("confirmed");
      }
    },
    {
      text: "Cancel",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

$( ".selector" ).dialog( "open" );

});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
<body>
<div class="selector" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>

jQuery UI中的对话框无法打开

1 个答案: