Bootstrap 3 - 如何通過AJAX加載模態內容？

Question

正如你所看到的here，我有一個啓動模式的按鈕。爲按鈕設置一個href url，這個url會被Bootstrap 3自動加載到模態中。 事實上，這個頁面被加載到模態根目錄（如在bootstrap 3 documentation for modals usage中所述）。我想將它加載到模態體中。

有沒有辦法通過屬性（而不是JavaScript）來做到這一點？或者什麼是最自動的方式呢？

P.S.我記得在Bootstrap 2中，內容被加載到身體中，而不是根。

Answer 1

檢查this SO answer出。

它看起來像唯一的方法是提供整個模態結構與您的ajax響應。

正如您可以從引導程序source code中檢查，加載函數綁定到根元素。

如果無法修改ajax響應，一個簡單的解決方法可能是在您的body元素上顯式調用$(..).modal(..)插件，即使它可能會破壞根元素的顯示/隱藏功能。

Answer 2

我想你正在尋找這個自定義函數。它需要一個數據切換屬性並動態創建放置遠程內容所需的div。只需在您想通過AJAX加載的任何鏈接上放置data-toggle =「ajaxModal」即可。

JS部分：

$('[data-toggle="ajaxModal"]').on('click', 
       function(e) { 
       $('#ajaxModal').remove(); 
       e.preventDefault(); 
       var $this = $(this) 
        , $remote = $this.data('remote') || $this.attr('href') 
        , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>'); 
       $('body').append($modal); 
       $modal.modal({backdrop: 'static', keyboard: false}); 
       $modal.load($remote); 
       } 
      ); 

最後，在遠程內容，你需要把整個結構的工作。

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
      <a href="#" class="btn btn-white" data-dismiss="modal">Close</a> 
      <a href="#" class="btn btn-primary">Button</a> 
      <a href="#" class="btn btn-primary">Another button...</a> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

Answer 3

這實際上超級簡單，只需添加一點點的javascript。該鏈接的href被用作ajax內容源。請注意，對於Bootstrap 3. *，我們設置data-remote="false"以禁用deprecated Bootstrap load function。

的JavaScript：

// Fill modal with content from link href 
$("#myModal").on("show.bs.modal", function(e) { 
    var link = $(e.relatedTarget); 
    $(this).find(".modal-body").load(link.attr("href")); 
}); 

HTML（基於the official example）：

<!-- Link trigger modal --> 
<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default"> 
    Launch Modal 
</a> 

<!-- Default bootstrap modal example --> 
<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-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </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> 
    </div> 
</div> 

自己嘗試一下：https://jsfiddle.net/ednon5d1/

Answer 4

使用情態動詞的簡單方法是用eModal！

防爆從github：

1. 鏈接eModal。JS <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

2. 使用eModal顯示警報，AJAX，提示模式或證實

   // Display an alert modal with default title (Attention) 
   eModal.ajax('your/url.html'); 
   

$(document).ready(function() {/* activate scroll spy menu */ 
 

 
    var iconPrefix = '.glyphicon-'; 
 

 

 
    $(iconPrefix + 'cloud').click(ajaxDemo); 
 
    $(iconPrefix + 'comment').click(alertDemo); 
 
    $(iconPrefix + 'ok').click(confirmDemo); 
 
    $(iconPrefix + 'pencil').click(promptDemo); 
 
    $(iconPrefix + 'screenshot').click(iframeDemo); 
 
    ///////////////////* Implementation */////////////////// 
 

 
    // Demos 
 
    function ajaxDemo() { 
 
     var title = 'Ajax modal'; 
 
     var params = { 
 
      buttons: [ 
 
       { text: 'Close', close: true, style: 'danger' }, 
 
       { text: 'New content', close: false, style: 'success', click: ajaxDemo } 
 
      ], 
 
      size: eModal.size.lg, 
 
      title: title, 
 
      url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete' 
 
     }; 
 

 
     return eModal 
 
      .ajax(params) 
 
      .then(function() { alert('Ajax Request complete!!!!', title) }); 
 
    } 
 

 
    function alertDemo() { 
 
     var title = 'Alert modal'; 
 
     return eModal 
 
      .alert('You welcome! Want clean code ?', title) 
 
      .then(function() { alert('Alert modal is visible.', title); }); 
 
    } 
 

 
    function confirmDemo() { 
 
     var title = 'Confirm modal callback feedback'; 
 
     return eModal 
 
      .confirm('It is simple enough?', 'Confirm modal') 
 
      .then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); }) 
 
      .fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) }); 
 
    } 
 

 
    function iframeDemo() { 
 
     var title = 'Insiders'; 
 
     return eModal 
 
      .iframe('https://www.youtube.com/embed/VTkvN51OPfI', title) 
 
      .then(function() { alert('iFrame loaded!!!!', title) }); 
 
    } 
 

 
    function promptDemo() { 
 
     var title = 'Prompt modal callback feedback'; 
 
     return eModal 
 
      .prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title }) 
 
      .then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) }) 
 
      .fail(function (/**/) { alert('Why don\'t you tell me your name?', title); }); 
 
    } 
 

 
    //#endregion 
 
});

.fa{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" > 
 
<link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="row" itemprop="about"> 
 
\t <div class="col-sm-1 text-center"></div> 
 
\t <div class="col-sm-2 text-center"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-10 text-center"> 
 
\t \t \t \t <h3>Ajax</h3> 
 
\t \t \t \t <p>You must get the message from a remote server? No problem!</p> 
 
\t \t \t \t <i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-sm-2 text-center"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-10 text-center"> 
 
\t \t \t \t <h3>Alert</h3> 
 
\t \t \t \t <p>Traditional alert box. Using only text or a lot of magic!?</p> 
 
\t \t \t \t <i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="col-sm-2 text-center"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-10 text-center"> 
 
\t \t \t \t <h3>Confirm</h3> 
 
\t \t \t \t <p>Get an okay from user, has never been so simple and clean!</p> 
 
\t \t \t \t <i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-sm-2 text-center"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-10 text-center"> 
 
\t \t \t \t <h3>Prompt</h3> 
 
\t \t \t \t <p>Do you have a question for the user? We take care of it...</p> 
 
\t \t \t \t <i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-sm-2 text-center"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-10 text-center"> 
 
\t \t \t \t <h3>iFrame</h3> 
 
\t \t \t \t <p>IFrames are hard to deal with it? We don't think so!</p> 
 
\t \t \t \t <i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-sm-1 text-center"></div> 
 
</div>