使用模態與外部URL正文和來自數據屬性的動態鏈接

我試圖使用外部鏈接進行Bootstrap模態工作。使用模態與外部URL正文和來自數據屬性的動態鏈接

這就是我所做的事情到現在爲止，但有一些語法錯誤，我認爲：

<html> 
    <head> 
     <link type="text/css "rel="stylesheet" href="/assets/css/bootstrap.min.css" /> 
    </head> 
    <body> 
     <a href="#popUp" id="popUp" data-href="/test1.php">1</a> 
     <a href="#popUp" id="popUp" data-href="/test2.php">2</a> 
     <div class="modal fade" id="popUpModal" tabindex="-1" role="dialog" aria-labelledby="popUpModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="popUpModalLabel">PopUp</h4> 
        </div> 
        <div class="modal-body"> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript" src="/assets/js/jquery.1.10.2.min.js"></script> 
     <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#popUp').click(function() { 
        $('#popUpModal .modal-body').load(('#popUp').data('href'), function(e) { 
         $('#popUpModal').modal('show') 
        }) 
       }) 
      } 
     </script> 
    </body> 
</html>

基本上，這個想法是打開/test1.php爲模式（popUpModal）如果我點擊1和/test2.php如果我點擊2。

來源

2014-12-30 Kupigon

您有失蹤'）'在腳本的末尾，什麼應該關閉'。就緒（' ID的應該在HTML中是唯一的，並且你有2個ID相同的ID'popUp' – vaso123

我已經添加了缺失），但是如果我做了不同的ID，我必須爲它們中的每一個做不同的JS ...... Isn有沒有其他方法？ – Kupigon

有，見我的答案。 – vaso123

在你到底有沒有丟失)你的腳本應該關閉.ready（ID應該是HTML中唯一的，並且你有兩個ID相同的彈出窗口）

更改彈出窗口鏈接id到class和使用$(this).data('href')在這裏裝載：

<a href="#popUp" class="popUp" data-href="/test1.php">1</a> 
<a href="#popUp" class="popUp" data-href="/test2.php">2</a>

和腳本：

$(document).ready(function() { 
    $('.popUp').click(function() { 
     $('#popUpModal .modal-body').load($(this).data('href'), function(e) { 
      $('#popUpModal').modal('show') 
     }); 
    }); 
});

來源

2014-12-30 14:46:39 vaso123

謝謝！完美工作:-)我試圖做這個工作，因爲我的頁面有100多個彈出窗口。 – Kupigon

不客氣！ – vaso123

在V3.1上述行爲已更改，現在遠程內容加載到.modal內容

<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Click me !</a> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Modal title</h4> 

       </div> 
       <div class="modal-body"><div class="te"></div></div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
      <!-- /.modal-content --> 
     </div> 
     <!-- /.modal-dialog --> 
    </div> 
    <!-- /.modal -->

小提琴 http://jsfiddle.net/koala_dev/NUCgp/918/

來源

2014-12-30 14:43:10

我知道，但我想從data-href屬性動態鏈接，因爲我不想在我的頁面中創建多個模式。 – Kupigon

使用模態與外部URL正文和來自數據屬性的動態鏈接

回答

相關問題