使用 jquery 创建模式对话框 [关闭]答案

【问题标题】：Creating modal dialog with jquery [closed]使用 jquery 创建模式对话框 [关闭]
【发布时间】：2016-12-21 01:17:51
【问题描述】：

当有人点击我的标签时，我想打开一个类似“警报”的小元素，并且我希望能够使用模式的按钮功能。

是否有可以轻松执行此类操作的 jquery 库/扩展？

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

     openModal();

});

【问题讨论】：

alert("Show your message")
甚至 jquery 对话框
我不知道这个事件名称是什么？

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

一种简单快捷的方法可能是使用一些 UI 框架，例如 Bootstrap，它具有开箱即用的 HTML 组件。在您的应用中包含框架后，您可以复制和粘贴模板并显示模态框等等。

在您的 js 脚本中：

$(document).on('click', '#MyLabel', function () {
    
    // show the modal
    $('#MyModal').show();

    // validate the modal is fully loaded to DOM
    $('#MyModal').on('shown.bs.modal', function (e) {

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

【讨论】：

模型内部的按钮。它不适用于onClick 函数
嗨@ZainFarooq，请参阅上面的更新。它涵盖了按钮功能
我还编辑了这段代码......如果你的作品正常。你可以继续你的
@DotBot 谢谢，这对我有很大帮助！回答！

【解决方案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');
              }
                }
});

【讨论】：

我怎样才能点击女巫按钮？
看看这个：jsfiddle