JS 点击模态框外边关闭

2024-10-21

关于点击弹框外部区域弹框关闭的交互处理（前端JS）

常见需求场景前端在处理交互的时候,经常遇到这样的场景,点击一个按钮,出现一个弹框,点击外部区域,弹框关闭. 解决方法思路说明: 1.给弹框的div父级都加个类名,如: 2.在document绑定一个点击事件,获取当前点击元素的类名,开始向上找,找它的父级类名, 2.1. 包含我们加的几个类名,则表示点击的是当前框,不处理: 2.2. 不包含我们加的几个类名,则是外部区域,关闭当前显示框: 代码实现 // 添加点击事件 document.addEventListener('click', e

使用bootstrap的JS插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 a. 引入全部JS插件我们在使

JS 实现图片模态框，幻灯片，跑马灯功能

网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去参考了菜鸟教程,有兴趣自己去看 HTML//写代码时,HTML记得包裹顺序就行,其他的往下写,搭建结构  <h2 style="text-align:center">Lightbox</h2> <div class="row">

bootstrap模态框手动关闭遮盖层不消失

模态框中加载了一个子页面子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭但是遮盖层不消失 $(".modal-backdrop").remove();//确实关闭了遮盖层也消失了但是第二次再打开模态框的时候就会一闪而过2.$("button .close").click()//手动控制模态框的关闭按钮触发点击,也不行,也是遮盖层

js控制Bootstrap 模态框（Modal）插件

js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

bootstrap 点击模态框上的提交按钮后，模态框不能关闭的解决办法

项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(delTag的值),来确定是否删除成功,delTag为true,删除成功,此时应执行语句 $('#deleteMessModal').modal('hide'); 把模态框关掉,但是调试时怎么页关闭不掉,F12进入调试模式,转到console里面一看,报错了: Uncaught TypeError: $(

jQuery点击弹出层，弹出模态框，点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

JS /CSS 实现模态框（注册和登录组件）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS/CSS 注册表单(模态框设置)</title> <style> input[type=email], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-bl

JS学习笔记(模态框JS传参)

博主最近基于django框架的平台第一版差不多完成了今天整理下开发过程中遇到的前端知识基于前端bootstrap框架模态框传参问题上前端html代码: <div class="modal modal-info fade" id="modal-info"> <div class="modal-dialog"> <div class="modal-content"> <div cla

(网页)bootstrap模态框手动关闭(转)

在菜鸟教程上的bootstrap 上面的模态框上看到的: 下面是一些可与 modal() 一起使用的有用的方法. $('#identifier').modal({ keyboard: false }) 手动切换模态框. $('#identifier').modal('toggle') 手动打开模态框. $('#identifier').modal('show') 手动隐藏模态框. $('#identifier').modal('hide') 事件下表列出了模态框中要用到事件.这些事件可在函数中

jquery点击弹框外层关闭弹框

$(document).bind("click",function(e){ if($( e.target ).closest(".game-container").length == 0){ alert(111); $(".game-container").hide();//game-container是弹框的样式名称 }else{

js 点击文本框，预览选择图片

点击文件选择框,选择图片文件,通过FileReader对象,读取图片文件中的内容,存放于result中,具体代码如下 <input type="file" onchange="fileReader(this)" /> <div id="d"> <img id="img" src="" /> </div> <script type="text/j

vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false&quo

js页面的弹框怎么关闭啊

1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){document.getElementById("pointsform").submit();alert('保存成功');window.opener.document.getElementById("cmd").value="query";window

bootstrap模态框手动开启关闭与设置点击外部不关闭

http://www.cnblogs.com/qlqwjy/p/7491054.html 完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 1.手动开启与关闭模态框的方法按钮开启与JS函数开启(2种) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstr

MVC中调用模态框之后导致JS失效

今天在工作中碰到一个页面调用模态框之后,页面原来的JS失效的问题,由于前台经验较少,折腾了一天... 问题描述是这样,在页面,有两个下拉列表框A和B,做了下拉列表框联动,有一个button按钮会调用模态框,刚进入页面联动是好用的,所以联动的JS 代码没问题,点击模态框之后,JS失效. 上图是下拉列表框联动的JS 经过不懈的调试(其实就是各种瞎试)以及询问老大哥(这个才是解决之道),终于发现了问题所在: 页面刚加载进来的时候联动JS好用,是因为直接加载了JS,调用模态框之后,在success回调函

Bootstrap modal模态框关闭时，combobox input下拉框仍然保留在页面上

问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态框下事件的处理方法是不同的此处模态框是用bootstrap实现的,页面代码为: <div class="modal fade" id="moveStockToBrandModal" tabindex="-1" role="dialo

Bootstrap中关闭第二个模态框时出现的问题和解决办法

Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第二个模态框时,第一个模态框的滚动条消失了不能滚动解决办法:就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置主模态框的样式,给其加一个样式:'overflow-y':'scroll',代码如下: $('#failed-modal').on('hidden.bs.modal', f

轻量级Modal模态框插件cta.js

今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <section class="section--white" style="margin-top: 40px;"> <div class="tile-container"> <div class="tile"

Bootstrap 模态框（Modal）插件

原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的

Bootstrap <基础三十二>模态框（Modal）插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 用法您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggl

JS 点击模态框外边关闭

热门专题