【问题标题】: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
猜你喜欢
  • 1970-01-01
  • 2012-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多