jquery生成模態框

我想顯示一個模態框。這可能嗎？我有下面的代碼顯示我如何正常生成的文本框等jquery生成模態框

$(document).ready(function(){ 

var counter = 1; 

$(".thing").click(function GenerateModal() { 

var newModal = $(document.createElement('div')) 
    .attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true'); 


newModal.after().html('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>'); 

//Excecute new modal?// 

counter++; 
}); 
});

來源

2013-10-07 Auguste

不要刪除問題，請告訴我們您是如何通過使用下面的「回答您的問題」按鈕發佈自己的答案來解決問題的。這將有助於其他有相同問題的人。 –

此解決方案基於http://www.webdesignerdepot.com/2012/04/techniques-for-creating-modal-windows/。爲了創建模態對話框，使用覆蓋整個屏幕的div-「層」。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Modal Window</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script type="text/javascript"> 

     var newModal; 

     function executeModal() { 
      $("#blind").attr("z-index", 9999).show(); 
      $("#modalDivContainer").append(newModal).show(); 
     } 

     function closeModal(count) { 
      $("#modalDivContainer").hide(); 
      $("#myModal" + count).remove(); 
      $("#blind").attr("z-index", 0).hide(); 
     } 

     $(document).ready(function() { 

      var counter = 1; 

      $(".thing").click(function GenerateModal() { 
       newModal = $(document.createElement('div')) 
         .attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true'); 
       newModal.after().html('<div class="modal-header"><button onclick="closeModal(' + counter + ')" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>'); 
       executeModal(); 
       counter++; 
      }); 
     }); 

    </script> 
    <style type="text/css"> 
     .blind 
     { 
      z-index:0; 
      position:absolute; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      display: none; 
      background-color:#555; 
     } 
     .modalDivContainer { 
      z-index: 10000; 
      position:absolute; 
      top: 50%; 
      left: 50%; 
      width:400px; 
      height:300px; 
      margin-left:-200px; 
      margin-top:-150px; 
      display: none; 
      background-color:#ffffff; 
     } 
    </style> 
</head> 
<body> 
    <div class="blind" id="blind"></div> 
    <div class="modalDivContainer" id="modalDivContainer"></div> 
    <button class="thing">thing</button> 
</body> 
</html>

來源

2013-10-07 16:12:58

非常感謝，這將使我繼續; – Auguste

我很高興我可以幫助你，我也會很高興約upvote。 –

林不知道是什麼意思有：「執行新模式」

但這裏一些提示：

使用此：

$(".thing").click(function() {

或

function GenerateModal() {...} 
$(".thing").click(GenerateModal);

這也是可能的：

var newModal = $('<div attr="var" attr="var" attr="var" />')

或也.attr（）作爲陣列

var newModal = $('<div/>').attr({"attr":"var",...})

來源

2013-10-07 13:15:07 reyaner

感謝您的回覆：p我已經得到它：p我發佈速度比我想 – Auguste

jquery生成模態框

回答

相關問題