第一种方法：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap（弹出框）</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>弹出框（Modal）</h1>
<!-- 按钮触发弹出框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" onclick="btn()">弹出框（Modal）按钮</button>
<!-- 弹出框（Modal） -->
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">弹出框（Modal）标题</h4>
</div>
<div class="modal-body">
<h5>内容</h5>
<h5>内容</h5>
<h5>内容</h5>
<h5>内容</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//按钮
function btn(){
//设置标题
$("#myModalLabel").text("TEST");
//显示内容
$("#myModal").modal("show");
}
</script>
</body>
</html>
第二种方法（添加监听）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap（弹出框）</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h1>弹出框（Modal）</h1>
<!-- 在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹出框（Modal）按钮</button>
<!-- 弹出框（Modal） -->
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">弹出框（Modal）标题</h4>
</div>
<div class="modal-body">
<h5>内容</h5>
<h5>内容</h5>
<h5>内容</h5>
<h5>内容</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
//在弹出框之前触发
$("#myModal").on("show.bs.modal",function(){
alert("内容回显操作！！！");
});
});
</script>
</body>
</html>
分享到：
相关推荐
Bootstrap弹出框，也称为模态对话框或信息框，是Bootstrap框架中一个非常重要的组件。这个组件在网页设计中广泛使用，用于显示警告、询问用户输入或者展示详细信息等场景。Bootstrap弹出框通过JavaScript插件实现，...
本文详细介绍了Bootstrap弹出框的实现方法，从基础的HTML结构和JavaScript初始化，到选项配置、事件处理和自定义样式，为读者提供了全面的指导。希望本文能帮助开发者更好地利用Bootstrap的弹出框组件，创造出更加...
Bootstrap弹出框水平居中，垂直居中
Bootstrap弹出窗口是一种常见于网页设计中的交互元素，它用于显示通知、消息或者提供额外的交互界面。在本项目中，我们关注的是一个可拖拽的Bootstrap弹出窗口，这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的...
Bootstrap 弹出框（Popover）插件是一种交互式的UI组件，它在用户将鼠标悬停在特定元素上时展示一个扩展的信息视图。这个插件是基于Bootstrap框架，与工具提示（Tooltip）功能相似，但提供了更多的内容空间。在...
Bootstrap弹出框是一种常见的网页交互元素，用于提供额外的信息或者操作选项。在Bootstrap框架中，弹出框（Popover）常用于创建悬浮提示信息，通过点击或悬停在特定元素上触发显示。本篇将深入讲解如何自定义...
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...
1. **Bootstrap弹出框（Modal）**: Bootstrap的模态对话框（Modal）是其核心组件之一，常用于显示额外的内容或执行特定操作，如登录、注册、查看详情等。城市弹出框就是利用这一功能，创建一个可弹出的窗口，展示一...
Bootstrap弹出框，也称为Popover，是前端开发中常用的一个交互元素，用于展示额外的信息或者操作选项。在本文中，我们将深入探讨当Bootstrap弹出框无法正常调用时可能遇到的问题及其解决办法。 首先，Bootstrap的弹...
只提供了bootstrap弹出框样式 非常简洁
废话少说，切入正题，Bootstrap弹出框垂直居中的问题，因为我拿到的弹出框样式并非垂直居中，而是top 10%，但页面长了，就显得特别恶心。 解决方案如下所示： 1.在css里，找到 .modal.fade.in { top: 10%; } 这...
在本主题中，我们将深入探讨如何使用Bootstrap实现提示框（Tooltip）和弹出框（Popover）效果。 提示框（Tooltip）是Bootstrap提供的一种轻量级的交互元素，用于在鼠标悬停在某个元素上时显示额外的信息。在...
在本资源中，我们关注的是一个特定的Bootstrap模板——"Bootstrap点击弹出层用户登录窗口模板"，这个模板是基于Bootstrap 3.3.5版本构建的，它具有高效和易用的特点。 Bootstrap 3.3.5是该框架的一个稳定版本，包含...
Bootstrap弹出框插件，提供了一个扩展的视图，弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个...
"jQuery+Bootstrap美化弹出框"就是这样一个解决方案，它结合了jQuery的易用性和Bootstrap的响应式设计，为开发者提供了强大的自定义弹出框功能。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM...
Bootstrap的弹出框是内置于`bootstrap.js`和`bootstrap.css`文件中的，因此只需引入这些库，就能轻松使用弹出框组件。下面是一个基本的弹出框HTML结构示例： ```html <span aria-hidden="true">× ...