bootstrap 3 模态框 动态
时间: 2023-07-25 09:25:27 浏览: 167
Bootstrap实现模态框效果
生成?
要动态生成 Bootstrap 3 的模态框,你可以使用 jQuery 来实现。以下是一个生成模态框的示例代码:
```javascript
// 创建模态框的 HTML 代码
var modalHtml = '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
<div class="modal-dialog" role="document">\
<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">\
<p>Modal body text goes here.</p>\
</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>';
// 将模态框的 HTML 代码添加到页面中
$('body').append(modalHtml);
// 显示模态框
$('#myModal').modal('show');
```
这段代码会生成一个包含标题、内容和按钮的模态框,并将其添加到页面中。调用 `$('#myModal').modal('show')` 方法即可显示模态框。你可以根据自己的需求修改模态框的 HTML 代码。
阅读全文