index.hmtl
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>模态框插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">
<!--模态框声明
<div class="modal fade" id="myModal" tabindex="-1">
窗口声明
<div class="modal-dialog modal-lg">
内容声明
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
</div>
</div>
</div-->
<!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击弹窗</btton> -->
<!--模态框声明-->
<!-- <div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div> -->
<!-- <btton class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" href="content.html">点击弹窗</btton> -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登陆</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
</div>
</div>
</div>
<btton class="btn btn-primary btn-lg" id="btn">点击弹窗</btton>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#btn').on('click',function(){
$("#myModal").modal('show');
});
$('#myModal').modal({
show:false,
remote:'content.html'
});
$('#myModal').on('show.bs.modal',function(){
alert('当调用 show 方法时立即触发！');
});
$('#myModal').on('shown.bs.modal',function(){
alert('当弹窗完全出现再执行！');
});
$('#myModal').on('hide.bs.modal',function(){
alert('当调用 hide 方法时立即触发！');
});
$('#myModal').on('hidden.bs.modal',function(){
alert('当模态框完全关闭后触发');
});
$('#myModal').on('loaded.bs.modal',function(){
alert('当远程加载后触发');
});
</script>
</body>
</html>
content.html
<div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">远程加载</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4">X</div> <div class="col-md-4">X</div> <div class="col-md-4">X</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">注册</button> <button class="btn btn-primary">登陆</button> </div>
效果图：
相关推荐
4. **Bootstrap组件**：模板可能包含了Bootstrap的多种组件，如导航栏、按钮、卡片、模态框、轮播图等，这些组件经过优化，可以直接用于构建功能丰富的界面。例如，导航栏可用于在各栏目间切换，模态框可以优雅地...
3. **Bootstrap组件**：源码会展示如何利用Bootstrap的预定义样式和组件，如栅格系统、导航条、模态框、下拉菜单、按钮组、表单控制等。Bootstrap的CSS和JS插件可以极大地提升网页的外观和交互性。 4. **响应式设计...
8. **第13章 模态框插件**：模态框是一种在当前页面上弹出的窗口，用于展示额外信息或进行交互，如用户确认操作或填写表单。 9. **第14章 下拉菜单和滚动监听插件**：下拉菜单常用于导航，提供了多层次的链接选项。...
满意的效果插件.mp4**：这部分可能涉及Bootstrap内置的JavaScript插件，如模态框、下拉菜单、轮播图等，用于实现动态效果和增强用户体验。 2. **13.后台管理界面导航制作.mp4**：讲解如何利用Bootstrap构建后台管理...
15. **自定义字体和图标** (`glyphicons`): Bootstrap早期版本包含 Glyphicons 图标库，但现在推荐使用第三方图标库如 Font Awesome 或 Material Icons。 16. **媒体对象** (`media object`): `.media` 类用于创建...
在本节 "[SSH+Maven+Bootstrap视频教程]_第 五十三 讲" 中，我们将深入探讨三个关键的IT技术：Struts2（SSH框架的一部分）、Maven以及Bootstrap。这些技术都是现代Java Web开发中的核心组件，对于构建高效、可维护的...
12. **JavaScript插件**：Bootstrap3内置了一些基于jQuery的插件，如模态框、滚动监听、工具提示等，这些插件可以通过数据属性和JavaScript方法进行控制。 通过观看“www.java1234.com”提供的《一头扎进Bootstrap3...
【SSH+Maven+Bootstrap视频教程】第 三十四 讲主要聚焦于Web开发中的三大技术：Struts、Spring和Hibernate（简称SSH）的整合，以及现代化前端框架Bootstrap的使用。这一讲的重点在于如何利用Bootstrap的弹窗插件提升...
在本节 "[SSH+Maven+Bootstrap视频教程]_第 五十一 讲" 中，我们将深入探讨三个关键的IT技术：Struts2 (SSH 中的 S)，Spring (SSH 中的 H) 和 Maven，以及一个前端开发框架 Bootstrap。这些技术在现代Java Web应用...
2. **扩展和插件**：介绍了一些流行的Bootstrap插件和第三方扩展，如Glyphicons图标库、Bootstrap日期选择器等，以扩展框架的功能。 3. **性能优化**：讨论了如何通过合理引用资源、减少HTTP请求、压缩代码等手段，...
Bootstrap提供了一系列预先设计的CSS样式和JavaScript组件，如网格系统、导航栏、表单、按钮、模态框等，可以帮助开发者快速创建响应式和移动优先的网页。通过结合SSH后端框架和Bootstrap前端框架，我们可以构建出既...
此外，由于其广泛的社区支持和丰富的第三方扩展，Bootstrap也是持续更新和优化的，能够适应不断变化的Web开发需求。总的来说，这个“BootStrap后台管理模版”是高效开发后台界面的强大工具，能帮助开发者快速实现...
在本节"[SSH+Maven+Bootstrap视频教程]_第十七讲"中，我们将深入学习如何结合使用三种关键的开源技术：Spring、Struts2和Hibernate（SSH）框架，以及Maven项目管理和Bootstrap前端框架，以构建高效且具有现代用户...
6. **Bootstrap JavaScript**：`<script src="js/bootstrap.min.js"></script>`，提供了Bootstrap的交互功能，如模态框、导航菜单等。 7. **自定义CSS**：在`<style>`标签内，可以编写自己的CSS规则来定制Bootstrap...
在本节"[SSH+Maven+Bootstrap视频教程]_第 三十八 讲"中，我们将深入探讨如何结合SSH（Spring、Struts2和Hibernate）框架、Maven项目管理和Bootstrap前端框架来构建一个功能完善的Web应用程序。这个视频教程的重点是...
在本节 "[SSH+Maven+Bootstrap视频教程]_第 四十 讲" 中，我们将深入探讨如何将三个强大的技术栈——Struts2、Spring 和 Hibernate（简称 SSH）与 Maven 项目管理工具以及 Bootstrap 前端框架相结合，以构建高效、...
此外，Bootstrap还内置了13个jQuery插件，这些插件增强了组件的功能，如： 1. **模态对话框**：创建浮动的交互式窗口。 2. **标签页**：在不同内容之间切换。 3. **滚动条**：自定义滚动条样式，提高滚动体验。 4. ...
第13章共1课 第14章 01 数据类型和变量总结 02 集合定义和基本操作方法 03 集合关系运算交，差，并集 04 集合的其他内置方法 05 集合补充 06 百分号字符串拼接 07 format字符串格式化 08 数学意义的函数与python中...
【第十三届蓝桥杯大赛（软件类）Web应用开发组竞赛规则及说明】 蓝桥杯大赛是一项旨在培养和选拔软件和信息技术专业人才的国家级竞赛，尤其关注前端开发领域的技术掌握。Web应用开发组的比赛对参赛者的HTML5和CSS3...