用jquery创建模态对话框

Question

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

是否有一个jQuery库/扩展，可以轻松地做到这一点？

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

    openModal(); 

}); 

Answer 1

这是一个在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'); 
       } 
       } 
}); 

Answer 2

一个简单，快捷的方式可能会使用一些UI框架一样Bootstrap，具有开箱即用HTML组件。在您的应用中包含框架之后，您可以复制&粘贴模板并显示模式，而不是。

在你的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。将来会更具描述性，并做一些调查以避免投票☺祝你好运！ ☺