Bootstrap 3-如何通过 AJAX 加载模态主体中的内容？

正如您可以看到的 给你，我有一个按钮，启动一个模态。设置一个 href 网址的按钮这个网址是自动加载到模式引导3。 事实上，这个页面是加载到模态根(如在 Bootstrap 3模态使用文档中所说)。我想把它加载到模态主体中。

有没有通过属性(而不是 javascript)实现的方法？或者最自动的方式是什么？

另外，我记得在 Bootstrap 2中，内容是在主体中加载的，而不是根目录。

382434 次浏览
小开
最佳答案

看看 这么回答。

看起来唯一的方法是提供您的 ajax 响应的整个模态结构。

正如您可以从引导程序 源代码检查的那样，load 函数绑定到根元素。

如果您不能修改 ajax 响应，一个简单的解决方案可以是在 body 元素上显式调用 $(..).modal(..)插件，即使它可能会破坏根元素的 show/hide 函数。

小开

我猜你正在搜索这个定制功能。它接受 data-toggle 属性，并动态创建放置远程内容所需的 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">&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 -->
小开

这实际上非常简单，只需要添加一点 javascript。链接的 href 用作 ajax 内容源。请注意，对于 Bootstrap 3。* 我们设置 data-remote="false"禁用 不推荐的自举加载函数。

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

小开

使用模态的一个简单方法是使用 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">
<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 调用，您可以看到如何从另一个 html 页面获取结果。

 $.ajax({url: "registration.html", success: function(result){
//alert("success"+result);
$("#contentBody").html(result);
$("#myModal").modal('show');


}});

一旦调用完成，您将根据结果获取页面的内容，然后您可以使用。

您可以调用控制器并获取页面内容，并且可以在您的模式中显示这些内容。

下面是 Bootstrap 3模式的例子，我们正在从 registration.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">&times;</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>
小开

在需要用 来自不同 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);
}
});
});

引导3演示
引导程序4演示


提交答案