用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。將來會更具描述性，並做一些調查以避免投票☺祝你好運！ ☺