Question

当有人点击我的标签时，我想打开一个小小的＆＃34;警告＆＃34;喜欢元素，我希望能够使用模态的按钮功能。

是否有一个jquery库/扩展可以轻松做到这样的事情？

$(document).on('click', '#MyLabel', function() { 

     openModal();

});

Answer 1

一种简单快捷的方式可能是使用某些UI框架，例如 Bootstrap ，它具有开箱即用的HTML组件。在您的应用程序中包含框架后，您可以复制＆amp;粘贴模板和显示模态，什么不是。

在你的js脚本中：

$(document).on('click', '#MyLabel', function() { 

   $('#MyModal').show();

   // do stuff like button click callback:
   $('.approve').on('click', function(){
      alert('approved');
   }

});

对于模板，您可以使用此示例摘自Boostrap's documentation：

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">Modal body</div>

            <div class="modal-footer">
                <!-- Approve Button -->
                <button class="approve btn btn-primary" type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>

希望这有帮助！

顺便说一下 - 你在stackoverflow中。在未来更具描述性，做一点研究，以避免投票☺祝你好运！ ☺

Answer 2

这是jQuery UI中一个非常简单的任务。见jsfiddle

$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    buttons   : {
              'OK' : function() {
                  var textValue = $('#myTextBox').val();
                  alert('The value of the text box is ' + textValue);
                  //Now you have the value of the textbox, you can do something with it, maybe an AJAX call to your server!
              },
              'Close' : function() {
                  alert('The Close button was clicked');
                  $(this).dialog('close');
              }
                }
});

使用jquery创建模式对话框

2 个答案: