jquery generate modal box

Я бы хотел показать окно модального. Это возможно? У меня есть код ниже показывает, как я обычно генерировать текстовые и т.д.jquery generate modal box

$(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

Я рад, что я мог бы вам помочь, я также буду рад о повышении. –

Im не уверен, что значит с: «Выполнить новый модальный»

Но вот некоторые намеки:

Используйте это:

$(".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 generate modal box

ответ

Смежные вопросы