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

Bootstrap Modal关闭与链接跳转

最新推荐文章于 2024-11-20 09:59:01 发布

原创最新推荐文章于 2024-11-20 09:59:01 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #纵观千象 #每天进步一点点 #学习永无止境 #bootstrap #ViewUI

js 同时被 2 个专栏收录

123 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

本文介绍如何在Bootstrap中实现Modal窗口的关闭同时完成页面链接的跳转。当使用a标签作为关闭按钮时，直接添加data-dismiss=modal属性无法实现跳转，文中提供了一种解决方案：通过JavaScript控制location来达到目的。

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_13003

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Bootstrap 模态框(Modal)深度解析：7种高级用法

AI架构全栈开发实战笔记

05-24

1205

Bootstrap模态框的基础用法（如通过触发、基础样式配置）在官方文档中已有详细说明，但实际开发中我们常遇到更复杂的需求：动态生成模态内容、多层嵌套模态、与表单验证深度集成、自定义动画效果等。本文将聚焦这些「官方文档没说透」的场景，结合源码级解析和实战案例，帮你掌握模态框的「进阶生存技能」。本文将按照「原理拆解→高级用法→实战案例→避坑指南」的逻辑展开：首先用「快递柜取件」的生活案例类比模态框工作原理；然后通过7个具体场景（动态创建、嵌套模态等）讲解高级用法，每个场景包含代码示例和底层逻辑分析；

Bootstrap最新最全面试题及参考答案

大模型大数据攻城狮的专栏

10-26

862

目录 Bootstrap 简介使用 Bootstrap 的原因在使用 Bootstrap 时声明的文档类型及原因在项目中引入 Bootstrap 的方法 Bootstrap 使用的 CSS 方法论 Bootstrap 网格系统（Grid System） Bootstrap 网格系统（Grid System）的工作原理 Bootstrap 的栅格系统工作原理 Bootstrap 栅格系统中不同屏幕尺寸下列宽的定义 Bootstrap 中实现列偏移的方法 Bootstrap 中实

参与评论您还未登录，请先登录后发表或查看评论

a-modal关闭和重写确定、取消

qihangVIP4的博客

12-09

1万+

a-modal对话框

a-modal 关闭按钮阻止关闭窗口

huanglgln的专栏

02-01

2624

ant design vue、a-modal、阻止关闭

ant-design modal关闭处理

weixin_47365040的博客

06-04

8409

对话框关闭后内容不消失问题重述 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

787

项目中重复使用的a-modal组件（antd vue)，我们一般封装起来再引用。在使用时，会有关于visible的报错或者打开弹窗时明明visible已经为true了，但是弹窗还是没有显示出来的问题。

模态窗口中的链接

WilliamChang的专栏

02-17

1240

点击模态窗口里的一个链接（这种），都会弹出一个新窗口，如何解决？方法1：在模态窗口页面里加上这一句：方法2 模态窗口里的页面放在frame或iframe里方法1比较简单。

详解bootstrap的modal-remote两种加载方式【强化】

12-10

通过在`<a>`标签中添加`data-toggle="modal"`和`data-target="#mymodal"`属性，可以实现点击链接后打开指定ID（如`#mymodal`）的模态框，并动态加载链接（如`demo.jsp`）的内容。这种方式中，链接可以指向服务器端的...

bootstrap入门helloworld

06-03

Bootstrap是世界上最流行的前端开发框架，尤其对于网页设计和开发来说，它提供了一套完整的响应式布局、移动设备优先的Web开发解决方案。"bootstrap入门helloworld"这个主题旨在帮助初学者快速掌握Bootstrap的基本...

Bootstrap 一篇就够快速入门&使用（中文文档）

最新发布

岂不闻

11-20

621

ant(a-modal弹窗表单父子组件)简单使用

ant-design UI库一些api用法总结

前端~锋小张

04-08

1750

a-modal 设置高度方法1：在a-modal标签上增加一个calss类名，并单独写在style中，不可放在含有scope属性的style标签中。方法2：在a-modal标签外层增加一个包裹层，并设置 ref=“replayModal”；在a-modal的标签上加上 :getContainer=" () => $refs.replayModal" 然后设置 <style lang="scss" scope> /deep/ .ant-modal-..

Bootstrap之模态框

lss0555的博客

02-11

591

前言模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。用法您可以切换模态框（Modal）插件的隐藏内容：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#...

Bootstrap的modal 远程加载Url的正确用法：

mrhaoxiaojun的博客

11-18

1万+

Click me × Modal title

vue +iview +modal 弹框关闭后再次打开不显示的问题

weixin_57005594的博客

11-12

4040

在做项目中再次遇到问题 1.问题环境：vue+iview 2.问题描述：将Modal对话框封装成一个子组件，在父组件引用，当对话框打开然后关闭，再次打开时对话框无法正常打开；！！！3.解决：搜索了好多例子，有的说props属性接收的值在子组件是无法改变的，因为v-model是双向绑定当对话框状态发生该变，props的值也会改变，这样会导致报错，但是实测过后发现并无报错。排查问题后发现原来是在父组件给子组件传值是赋值发生了问题父组件：这个是在render函数里面写的，h,和params

modal模态框的几种打开方法+问题集锦

Fighting_mjtao的博客

11-24

2972

转载自：https://www.cnblogs.com/sxdcgaq8080/p/8193535.html 第一部分：　　关于bootstrap中modal的使用，下面把几种自己用的打开方法展示出来　　首先呢，得有个Bootstrap的页面，这里就不说了。　　其次呢，得有个modal放在页面中，不管你这段代码加在页面代码的什么地方，默认是不会显示出来的　 <div cla...

BootStrap a标签模态框传值缺失问题及解决

Reborn_Chang的博客

01-09

1784

博主最近在做项目上的一个小功能，遇到一个问题，解决后来记录下经过，如果有人遇到同样问题，希望看到有益。首先说下项目基础架构：后端SSM，前端jQuery+bootStrop。问题：在使用Bootstrap的模态框进行a标签跳转时，a标签文本前台打印出来无误，但是后台接收是部分参数缺失。 a标签定义如下： &lt;a href="${base...

弹出框与模式框解决方案及UI框架应用

本文将围绕标题《对弹出框和模式框解决的方案》展开深入分析，结合描述中提供的博文链接以及相关标签如“弹出框、模式框、UI框架、前端开发、用户界面、JavaScript、HTML、CSS、交互设计、Web组件”，系统性地阐述该...