Bootstrap A标签关闭modal并打开新的链接解决方案

最新推荐文章于 2024-10-26 14:20:04 发布
最新推荐文章于 2024-10-26 14:20:04 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： bootstrap js 文章标签： 乔乐共享 纵观千象 每天进步一点点 学习永无止境 bootstrap ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82636303
本文介绍如何在Bootstrap中实现Modal窗口的关闭同时完成页面链接的跳转。当使用a标签作为关闭按钮时，直接添加data-dismiss=modal属性无法实现跳转，文中提供了一种解决方案：通过JavaScript控制location来达到目的。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。

可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。

 

<a href="#/group-buy" class="btn btn-secondary btn-embossed enable-btn" data-dismiss="modal" onclick="javascript:window.location='#/group-buy'">去开启</a>

 

【Bootstrap V4系列】学习入门教程之 组件-模态框（Modal）
A_aspectJ的博客
05-12 1095
Bootstrap V4 的模态框（Modal）组件是一个用于创建对话框的强大工具，适用于灯箱、用户通知或自定义内容。模态框通过 HTML、CSS 和 JavaScript 实现，位于页面内容之上，并禁用页面滚动以确保模态内容可滚动。Bootstrap 一次仅支持一个模态框，且不支持嵌套模态框。模态框使用 position:fixed，因此在移动设备上需注意兼容性问题。通过示例代码，展示了如何实现模态框的触发、静态背景、长内容滚动、垂直居中以及动态内容切换等功能。
Bootstrap 模态框(Modal)深度解析：7种高级用法
最新发布
前端视界的博客
05-24 1020
Bootstrap模态框的基础用法（如通过触发、基础样式配置）在官方文档中已有详细说明，但实际开发中我们常遇到更复杂的需求：动态生成模态内容、多层嵌套模态、与表单验证深度集成、自定义动画效果等。本文将聚焦这些「官方文档没说透」的场景，结合源码级解析和实战案例，帮你掌握模态框的「进阶生存技能」。本文将按照「原理拆解→高级用法→实战案例→避坑指南」的逻辑展开：首先用「快递柜取件」的生活案例类比模态框工作原理；然后通过7个具体场景（动态创建、嵌套模态等）讲解高级用法，每个场景包含代码示例和底层逻辑分析；
a-modal关闭和重写确定、取消
qihangVIP4的博客
12-09 1万+
a-modal对话框
a-modal 关闭按钮阻止关闭窗口
huanglgln的专栏
02-01 2187
ant design vue、a-modal、阻止关闭
ant-design modal关闭处理
weixin_47365040的博客
06-04 8265
对话框关闭后内容不消失 问题重述 1、 打开对话框 2、选择内容 3、重新打开后 4、代码 <a-modal v-model="visible" title="发布活动" on-ok="handleOk"> <template slot="footer"> <a-button key="back" @click="handleCancel"> 返回 </a-button>
a-modal vue封装组件后开启关闭问题
weixin_45235764的博客
09-24 553
项目中重复使用的a-modal组件（antd vue)，我们一般封装起来再引用。在使用时，会有关于visible的报错或者打开弹窗时明明visible已经为true了，但是弹窗还是没有显示出来的问题。
bootstrap多个modal实现只可以操作当前modal，其他modal不可操作
qq_36412715的博客
02-26 1753
思路： 如两个modal,在第一个modal上又显示第二个modal。 默认情况下，两个modal可以同时操作。 但如果想打开第二个modal的时候，禁止操作第一个modal上的内容，可以通过再创建一个新的modal,作为中间层。 这个中间层modal的位置和大小要能覆盖住第一个modal，但内容为空，同时设置这个中间层modal的background-color为#000，opacity为0....
详解bootstrap的modal-remote两种加载方式【强化】
12-10
通过在`<a>`标签中添加`data-toggle="modal"`和`data-target="#mymodal"`属性，可以实现点击链接后打开指定ID（如`#mymodal`）的模态框，并动态加载链接（如`demo.jsp`）的内容。这种方式中，链接可以指向服务器端的...
Bootstrap最新最全面试题及参考答案
大模型大数据攻城狮的专栏
10-26 664
目录 Bootstrap 简介 使用 Bootstrap 的原因 在使用 Bootstrap 时声明的文档类型及原因 在项目中引入 Bootstrap 的方法 Bootstrap 使用的 CSS 方法论 Bootstrap 网格系统（Grid System） Bootstrap 网格系统（Grid System）的工作原理 Bootstrap 的栅格系统工作原理 Bootstrap 栅格系统中不同屏幕尺寸下列宽的定义 Bootstrap 中实现列偏移的方法 Bootstrap 中实
bootstrap入门helloworld
06-03
Bootstrap是世界上最流行的前端开发框架，尤其对于网页设计和开发来说，它提供了一套完整的响应式布局、移动设备优先的Web开发解决方案。"bootstrap入门helloworld"这个主题旨在帮助初学者快速掌握Bootstrap的基本...
Bootstrap 一篇就够 快速入门&使用（中文文档）
热门推荐
m0_60786924的博客
05-02 3万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
Bootstrap的modal 远程加载Url的正确用法：
mrhaoxiaojun的博客
11-18 1万+
Click me                                                                 ×                 Modal title                                                     
vue +iview +modal 弹框关闭后再次打开不显示的问题
weixin_57005594的博客
11-12 3998
在做项目中再次遇到问题 1.问题环境：vue+iview 2.问题描述：将Modal对话框封装成一个子组件，在父组件引用，当对话框打开然后关闭，再次打开时对话框无法正常打开； ！！！3.解决： 搜索了好多例子，有的说props属性接收的值在子组件是无法改变的，因为v-model是双向绑定当对话框状态发生该变，props的值也会改变，这样会导致报错，但是实测过后发现并无报错。 排查问题后发现原来是在父组件给子组件传值是赋值发生了问题 父组件： 这个是在render函数里面写的，h,和params
bootstrap-href触发模态弹出窗元素
weixin_34138056的博客
11-12 1546
1.运行效果如图所示 2.实现代码如下 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <t...
Bootstrap实现模态框
像风走过八千里
01-13 947
什么是模态框 模态框就是覆盖在父窗体上的子窗体，有点像弹出框，只不过这个弹出框是自己做出来的，可以显示自己设置的内容。 模态框的常用事件 目的 事件 实例 调用 show 方法后触发 show.bs.modal $("#myModel").on(‘show.bs.modal’,function () {//执行的操作}) 模态框对用户可见时触发 shown.bs.modal $...
bootstrap前端页面使用模态框（modal）弹出层
JehuXie的博客
08-31 2535
1，添加js文件 &lt;script type="text/javascript" src="/H-ui.admin/lib/jquery/1.9.1/jquery.min.js?version=0.001"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/H-ui.admin/lib/bootstrap-modal/.
Bootstrap实现弹窗
WangCode
11-13 5985
Bootstrap实现弹窗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框</title> <link rel="stylesheet" href="static/css/bootstrap.min.css"> </head> <body> <h2>创建模态框<
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值