只要我在模板中包含HTML代码,使用下面的代码,我就可以打开模式窗口
<a href="#" data-toggle="modal" data-target=".contact-form">
问题是我的页面中有很多模态,这使页面过于沉重。我想使用jquery绕过此问题,它将打开一个PHP文件,并且该PHP文件(除相关的PHP代码外)将加载模式(I'm using Smarty templates)
的模板。
关于我该如何做的任何例子?
谢谢克里斯
您只需要用页面替换page.php。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</head>
<body>
<a href="page.php" data-toggle="ajaxModal">My link</a>
</body>
<script>
$(document).on('click', '[data-toggle="ajaxModal"]',
function (e) {
$('#ajaxModal').remove();
e.preventDefault();
var $this = $(this)
, $remote = $this.data('remote') || $this.attr('href')
, $modal = $('<div class="modal fade" id="ajaxModal"><div class="modal-body"></div></div>');
$('body').append($modal);
$modal.modal();
$modal.load($remote);
}
);
</script>
</html>