Search code examples
jquerytwitter-bootstrappopuppopupwindow

Multiple Bootstrap Popup for same page not working

I want to open multiple popup windows on same page. Is it possible to load different content in each window using same data target and different hyperlinks .I have write some code but it is not working out for me right now. Just i want a multiple popups window with different content on same page and content will be dynamic that will come through hyperlinks. So here i can't change data-target to achieve results . There should be only 1 data target value.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.1.0 - Modal Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>
  </head>
  <body>
    <a data-toggle="modal" data-target="#myModal" href="edit1.html">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.html">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.html">Open modal 3</a>

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>



    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

You can check js fiddle link below :

        [http://jsfiddle.net/28cky6uj/][1]  
        [http://jsfiddle.net/zmq04u3f/][2]
Solution

  • yes it is possible to load different content in each window using same data target and different hyperlinks here the demo 

    .

    DEMO