同一頁面不工作的多引導程序彈出菜單

我想在同一頁面上打開多個彈出窗口。是否有可能使用相同的數據目標和不同的超鏈接加載每個窗口中的不同內容。我寫了一些代碼，但它現在不適合我。只是我想要在同一頁面上有不同內容的多彈出窗口，並且內容將是動態的，並且會通過超鏈接發佈。所以在這裏我不能改變數據目標來達到結果。應該只有1個數據目標值。同一頁面不工作的多引導程序彈出菜單

<!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>

您可以檢查以下JS提琴鏈接：

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

來源

2014-11-25 Mayank Kapahi

是有可能使用相同的數據目標和不同的超鏈接這裏的演示加載每個窗口不同的內容

DEMO

來源

2014-11-25 12:04:32

謝謝！ – 2014-11-25 12:40:49

同一頁面不工作的多引導程序彈出菜單

回答

相關問題