Bootstrap 3 - Как загрузить контент в модальное тело через AJAX?
Как видите,здесь, у меня есть кнопка, которая открывает модальное. Установка url-адреса href для кнопки этот url-адрес автоматически загружается в modal с помощью Bootstrap 3. Дело в том, что эта страница загружается в модальный корень (как сказано в bootstrap 3 документация для использования модалов). Вместо этого я хочу загрузить его в модальное тело.
есть ли способ сделать это с помощью атрибутов (не javascript)? Или каков самый автоматический способ сделать это?
P. S. Я помните, что в Bootstrap 2 содержимое было загружено в тело, а не в корень.
6 ответов:
Регистрация это так ответ выход.
похоже, что единственный способ-предоставить всю модальную структуру с вашим ответом ajax.
Как вы можете проверить из начальной загрузки исходный код, функция загрузки привязана к корневому элементу.
в случае, если вы не можете изменить ответ ajax, простой обходной путь может быть явным вызовом
$(..).modal(..)плагин на вашем элементе тела, даже если он, вероятно, сломает шоу / скрыть функции корневого элемента.
это на самом деле очень просто с помощью всего лишь немного добавленного javascript. Href ссылки используется в качестве источника контента ajax. Обратите внимание, что для Bootstrap 3.* мы установили
data-remote="false"отключить устаревшая функция загрузки Bootstrap.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 (на основе официальный пример):
<!-- 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">×</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/
Я думаю, вы ищете эту пользовательскую функцию. Он принимает атрибут переключения данных и динамически создает необходимый div для размещения удаленного содержимого. Просто поместите data-toggle= "ajaxModal" на любую ссылку, которую вы хотите загрузить через AJAX.
часть 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">×</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 -->
простой способ использовать это с eModal!
Ex от github:
- ссылка на eModal.js
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>использовать eModal, чтобы отобразить модальное для оповещения, Аякс, подскажите или подтвердите
// 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"> <div class="col-sm-1 text-center"></div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Ajax</h3> <p>You must get the message from a remote server? No problem!</p> <i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Alert</h3> <p>Traditional alert box. Using only text or a lot of magic!?</p> <i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Confirm</h3> <p>Get an okay from user, has never been so simple and clean!</p> <i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Prompt</h3> <p>Do you have a question for the user? We take care of it...</p> <i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>iFrame</h3> <p>IFrames are hard to deal with it? We don't think so!</p> <i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-1 text-center"></div> </div>
в случае, когда вам нужно обновить тот же модальный с контент из разных вызовов Ajax / API вот рабочее решение.
$('.btn-action').click(function(){ var url = $(this).data("url"); $.ajax({ url: url, dataType: 'json', success: function(res) { // get the ajax response data var data = res.body; // update modal content here // you may want to format data or // update other modal elements here too $('.modal-body').text(data); // show modal $('#myModal').modal('show'); }, error:function(request, status, error) { console.log("ajax call went wrong:" + request.responseText); } }); });
создайте пустое модальное поле на текущей странице, а ниже приведен вызов ajax, который вы можете увидеть, как извлечь содержимое в результате с другой html-страницы.
$.ajax({url: "registration.html", success: function(result){ //alert("success"+result); $("#contentBody").html(result); $("#myModal").modal('show'); }});после того, как вызов будет выполнен, вы получите содержимое страницы по результату, чтобы затем вы можете вставить код в идентификатор содержимого вашего модала.
вы можете вызвать контроллер и получить содержимое страницы, и вы можете показать, что в вашем модальном.
ниже приведен пример Bootstrap 3 модальный в том, что мы загрузка контента с регистрации.HTML-страница...
index.html ------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> function loadme(){ //alert("loadig"); $.ajax({url: "registration.html", success: function(result){ //alert("success"+result); $("#contentBody").html(result); $("#myModal").modal('show'); }}); } </script> </head> <body> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" onclick="loadme()">Load me</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" id="contentBody"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html> registration.html -------------------- <!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;} form { border: 3px solid #f1f1f1; font-family: Arial; } .container { padding: 20px; background-color: #f1f1f1; width: 560px; } input[type=text], input[type=submit] { width: 100%; padding: 12px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } input[type=checkbox] { margin-top: 16px; } input[type=submit] { background-color: #4CAF50; color: white; border: none; } input[type=submit]:hover { opacity: 0.8; } </style> <body> <h2>CSS Newsletter</h2> <form action="/action_page.php"> <div class="container"> <h2>Subscribe to our Newsletter</h2> <p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.</p> </div> <div class="container" style="background-color:white"> <input type="text" placeholder="Name" name="name" required> <input type="text" placeholder="Email address" name="mail" required> <label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label> </div> <div class="container"> <input type="submit" value="Subscribe"> </div> </form> </body> </html>