<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-danger" data-toggle="modal" data-target="#my">按鈕</button>
<div id="my" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span><span class="sr-only">關閉彈窗</span></button>
<h4 class="modal-title">標題</h4>
</div>
<div class="modal-body">
hello huangbaokang
</div>
<div class="modal-footer">
<button class="btn btn-info">取消</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下：
項目中的例子沒有這麼簡單，經常涉及到業務傳參，如列表裏的查看詳情，需要根據記錄id查詢對應的詳情。
博客參考 https://blog.csdn.net/linhaiyun_ytdx/article/details/77417702
https://www.jianshu.com/p/93f0f11a3cfc
傳值示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<div class="new_main" onclick="NewsDetail('2')">查看詳情</div>
<input type="text" id="newsid">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span><span class="sr-only">關閉彈窗</span></button>
<h4 class="modal-title">標題</h4>
</div>
<div class="modal-body">
<iframe src="" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-info">取消</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//綁定模態框展示的方法
window.NewsDetail = function (id) {
$("#newsid").val(id);
$('#myModal').modal('show');
}
$('#myModal').on('show.bs.modal', function (event) {
var newid = $("#newsid").val();
console.log("newid="+newid);
var modal = $(this); //get modal itself
modal.find('.modal-body iframe').attr("src", "http://localhost:8080/wlitsm?newsid=" + newid);
});
})
</script>
</body>
</html>
效果：
