Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗资源-CSDN文库

144 浏览量 2020-09-02 02:45:52 上传评论收藏 88KB PDF 举报

在本文中，我们将深入探讨如何使用Bootstrap框架创建一个在当前网页上弹出并可关闭的非弹窗对话框。Bootstrap的模态框功能提供了一种优雅的方式来展示额外的内容，而无需离开当前页面或打开新的窗口。让我们了解Bootstrap模态框的基本概念。模态框（Modal）是一种在用户界面上覆盖一层半透明背景，突出显示特定内容的组件。它通常由一个可关闭的头部、主体内容区域和一个底部的按钮栏组成。在Bootstrap中，我们可以通过添加特定的HTML类和数据属性来轻松实现模态框。在我们的例子中，我们需要创建一个模态框，当用户点击一个链接或按钮时，会显示一个包含服务协议的文本框。以下是创建这个模态框的步骤： 1. **引入Bootstrap和jQuery**：在HTML文档的`<head>`部分，我们需要引入Bootstrap的CSS和JavaScript文件，以及jQuery库。确保Bootstrap 3和jQuery 1.11.1版本被正确地引用，因为它们是相互兼容的。 ```html <!DOCTYPE html> <html> <head>  <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script src="js/jquery-1.11.1.js"></script> <script src="js/bootstrap.js"></script>  </head>  ``` 2. **创建模态框HTML结构**：在`<body>`部分，定义一个`<div>`元素，带有`.modal`、`.fade`和`id`（例如`myModal`），这将作为模态框的基础。接下来，添加`.modal-dialog`和`.modal-content`类，分别代表模态框对话框和内容容器。 ```html <body>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content">  </div> </div> </div>  </body> ``` 3. **定义模态框头部、主体和底部**：在`.modal-content`内，分别创建`.modal-header`、`.modal-body`和`.modal-footer`，并添加相应的元素。在头部，设置一个可关闭的按钮（`.close`），在主体部分放置服务协议的文本框（`.form-control textarea`），在底部设置一个或多个按钮（`.btn`）。 ```html <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">服务协议</h4> </div> <div class="modal-body"> <p align="center"> <textarea class="form-control" rows=3 readonly="true">本协议服务条款具有法律效力。</textarea> </p> </div> <div class="modal-footer"> <p align="center"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </p> </div> ``` 4. **触发模态框**：在页面中添加一个链接或按钮，使用`data-toggle="modal"`和`data-target="#myModal"`属性来触发模态框的显示。 ```html <p> <a data-toggle="modal" data-target="#myModal">服务协议</a> </p> <p> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">点击此阅读服务协议</button> </p> ``` 以上就是使用Bootstrap创建一个在当前页面弹出并可关闭的非弹窗对话框的基本步骤。通过这种方式，我们可以提供一种更友好的用户体验，让用户在查看服务协议等长内容时保持在原页面，而不是打开新窗口。模态框的灵活性还允许我们自定义样式和内容，以满足不同场景的需求。

资源详情

资源评论

Bootstrap编写一个在当前网页弹出可关闭的对话框编写一个在当前网页弹出可关闭的对话框非弹窗非弹窗

主要介绍了Bootstrap编写一个在当前网页弹出可关闭的对话框，不用跳转，非弹窗，感兴趣的小伙伴们可以参考一下

使用弹窗在网页中显示短信息还行，虽然不那么地友好。然而，弹窗对于如同网站服务条款的长信息就无能为力的了。这是需要使用一个叫

模态框modal的东西，并且在模态框里面嵌入一个多行文本框textarea。

这个东西，如果要手工写JavaScript代码就太难做了，但是使用Bootstrap来编写就简单起来。

一、基本目标一、基本目标

有一个网页，网页上面有一个超级链接，一个按钮：

点击他们都会打开一个如下所示的模态框，这个模态框，点击右上角的X按钮与下方的确定都会关闭。

二、制作过程二、制作过程

1.因为需要使用Bootstrap，所以先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对

2并不兼容，建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时，Bootstrap3所提供的JavaScript效果需要到

jQuery1.11（点击打开链接）支持，可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11（点击打开链接），而不是不兼容旧浏览器IE6

的jQuery2。下载完之后，配置好站点目录。把Bootstrap3直接解压到站点目录，而把jquery-1.11.1.js放到js目录，也就是与bootstrap.js同一

目录，站点文件夹的结构大致如下：

2.本网页编码如下，下面一个片段一个片段进行分析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈

Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗

评论0

最新资源

Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗

评论0

最新资源

相关推荐

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Js弹出层（支持拖拽，多个弹窗自动切换层级）

jQuery+Bootstrap美化弹出框

html的28个弹出提示代码

bootstrap实现弹窗和拖动效果

漂亮的弹出框

9种js弹出动态窗口的 php代码

弹出窗口

漂亮的jquery弹窗源码奉献

ztree树选中节点弹出层编辑

js、jquery阴影效果弹出层

美化弹出框

jQuery弹窗放大图片展示插件

bootstrap效果及一些整合的js

CSS设置漂亮的JS对话框

jquery弹窗特效，

前端表格增删查改例子bootstrap+layer+jquery

封装的dialog插件 基于bootstrap模态对话框的简单扩展

效果比较不错的jquery弹出效果

BootStrap 完整的后台管理框架

全面解析Bootstrap弹窗的实现方法

javascript版弹窗,错误提示

jQuery弹出层插件.rar

模仿iphone弹出式短信查看

jquery 弹出窗口

jQuery登录无刷新弹窗提醒.zip

Bootstrap用户手册（清晰pdf）

Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗

封装的dialog插件基于bootstrap模态对话框的简单扩展