Bootstrap 3 - Materyal gövdedeki içeriği AJAX ile nasıl yükleyebilirim?

Question

here'u gördüğünüz gibi, bir model başlatan bir düğmem var. Düğme için bir href url ayarlanması bu url otomatik olarak Bootstrap 3 tarafından modal'a yüklenir. Bu sayfa modal root'a yüklenmiştir (bootstrap 3 documentation for modals usage'da belirtildiği gibi). Bunun yerine modal-gövdeye yüklemek istiyorum.

Öznitelikler (javascript değil) aracılığıyla bunu yapmanın bir yolu var mı? Veya bunu yapmanın en otomatik yolu nedir?

P.S. Bootstrap 2'de içeriği hatırladım, içerik gövdeye değil, root'a yüklendi.

Answer 1

this SO answer çıkışını kontrol edin.

Ajax yanıtı ile tüm modal yapıyı sağlamak için tek yol gibi görünüyor.

Önyükleme source code'dan kontrol edebileceğiniz gibi, yük işlevi kök öğeye bağlanır.

ajax yanıtını değiştiremezseniz, kök öğesinin gösterme/gizleme işlevlerini muhtemelen kırsa da, basit bir çözüm, gövde öğenizdeki $(..).modal(..) eklentisinin açık bir çağrısı olabilir.

Answer 2

Sanırım bu özel işlevi arıyorsunuz. Bir veri-toggle niteliği alır ve uzak içeriği yerleştirmek için gerekli divi dinamik olarak oluşturur. AJAX ile yüklemek istediğiniz herhangi bir bağlantıya data-toggle = "ajaxModal" yazın.

JS kısmı:

$('[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); 
       } 
      ); 

Son olarak, uzak içerikte, çalışmak tüm yapıyı koymak gerekir.

<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

Bu, biraz eklenmiş javascript ile aslında çok basittir. Link'in href ajax içerik kaynağı olarak kullanılır. Bootstrap 3. * için deprecated Bootstrap load function'u devre dışı bırakmak için data-remote="false"'u ayarladık.

JavaScript'in: (the official example dayalı)

// 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:

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

Kendiniz deneyin: sistemle modeller kullanmak https://jsfiddle.net/ednon5d1/

Answer 4

basit bir yolu eModal beraber! github den

Ör: eModal için

1. bağlantı.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

2. kullanım eModal istemi uyarı, ajax, bir kalıcı görüntülemek için veya bu tam ben i hariç şimdi yapıyorum yoludur

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