bootstrap-模态框

最新推荐文章于 2021-08-23 14:46:24 发布
最新推荐文章于 2021-08-23 14:46:24 发布
阅读量279 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ifubing/article/details/95366107
版权

在这里插入图片描述

先创建一个按钮

在这里插入图片描述

模态框

三层结构

三个块

在这里插入图片描述
在这里插入图片描述

header，头部
body，身体
footer，底部

在这里插入图片描述

代码

在这里插入图片描述

效果

在这里插入图片描述

当前点击按钮没有效果。

下一步，让按钮与模态框关联起来

在这里插入图片描述

点击按钮后的效果

在这里插入图片描述

点击取消就关闭

在这里插入图片描述
dissmiss，消失

在这里插入图片描述

点击取消，框就会消失的了

添加一个fade样式，让出现有淡淡的感觉

在这里插入图片描述

设置大中小三个模态框
在这里插入图片描述

在这里插入图片描述
定义大的框

在这里插入图片描述
注意，加的位置，加在modal-dialog这里

定义小的框
在这里插入图片描述

中等的模态框就不加

看效果

大的框

在这里插入图片描述

中的框

在这里插入图片描述

小的框

在这里插入图片描述

用js控制

写一个自定义的按钮事件

先来一个按钮

在这里插入图片描述

再来jquery

先看结构

在这里插入图片描述

jquery

按钮的点击事件，让对应的模态框显示
在这里插入图片描述

效果

当前点击确定与取消是不能够有任何效果的

在这里插入图片描述

期望它的效果

先给个id，方便获取

在这里插入图片描述

然后继续写特效

在这里插入图片描述

当前效果，点击暗区也会隐藏，不期待这样的效果

在这里插入图片描述

解决办法

官方文档中

在这里插入图片描述

根据文档中的backdrop属性

在这里插入图片描述
把原来modal方法传参做一个改变

原来传参一个字符串，改变为传参为字典

鲸鱼编程pyhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
bootstrap之模态框
catherine_sfy的博客
03-01 419
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
bootstrap——模态框
ys_chy的博客
05-03 2356
让项目更加美观
BootStrap之模态框
骆小胖~
07-05 124
bootstrap模态框
qq_39432715的博客
10-09 156
1.导入bootatrap <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css"> <script src="../lib/jquery.min.js"></script> <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
Bootstrap3 模态框使用实例
08-31
Bootstrap3 模态框（Modal）是网页设计中常用的一种交互元素，用于展示弹出式的内容，如警告、确认对话框或者更复杂的信息。它允许用户在不离开当前页面的情况下处理额外的信息或执行操作。以下是对Bootstrap3模态框...
Java bootstrap-3.4.1-dist 前端框架
03-18
2. **预定义的组件**：Bootstrap提供了许多预定义的UI组件，如按钮、表单、下拉菜单、导航条、模态框、轮播图等，这些组件大大简化了前端开发工作，只需添加相应的类名即可实现丰富的界面效果。 3. **自定义样式**...
bootstrap-4.6.2
最新发布
06-13
2. JS文件：`bootstrap.min.js`包含了Bootstrap的JavaScript组件，例如模态框、下拉菜单、轮播图等，它们经过压缩和优化，提高加载速度。 3. 图标字体文件：`glyphicons-halflings-regular.*`（可能是.svg、.eot、....
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
Bootstrap模态框使用详解
08-31
Bootstrap模态框（Modal）是Bootstrap框架中一个非常实用的组件，它允许在不离开当前页面的情况下显示额外信息或执行操作。模态框通常用于显示警告、确认对话框或者进行表单输入等场景。以下是对Bootstrap模态框的...
BootStrap的模态框（modal）
qq_42370421的博客
08-23 255
1、引入js文件 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.st
Bootstrap 模态框
qq_27009517的博客
06-07 184
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(...
bootstrap 模态框
sundanping_123的博客
09-03 96
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...
BootStrap模态框
秋城落叶的博客
03-31 158
模态框（Modal）是覆盖在父窗体上的子窗体,是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动 子窗体可提供信息、交互等 通过data属性:在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#myModal"或href="#myModal&...
Bootstrap Modals（模态框）
weixin_30548917的博客
01-16 114
.modal('toggle') 该方法手动切换一个 modal（模态框）。 $('#example').modal('toggle') .modal(show) 该方法可用于手动打开一个 modal（模态框）。 $('#example').modal('show') .modal(hide) 该方法可用于手动隐藏一个 modal（模态框）。 $('#example').modal('hid...
Bootstrap之模态框（提示框）
yy228313的专栏
02-29 3569
1 效果图 Bootstrap的模态框可以用作，操作的提示、表单弹出窗口等。 2 代码 模态框测试 <!-- data-toggle:触发器 data-target:目标 --> 模态框测试 <!-- tabindex:
Bootstrap 3 模态框chosen
05-23
如果您想在 Bootstrap 3 模态框中使用 Chosen 插件，可以按照以下步骤进行操作： 1. 首先，确保您已经引入了 Bootstrap 和 Chosen 插件的相关文件。 2. 在模态框的 HTML 代码中，添加一个 select 元素，并为其添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值