开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js点击出现弹窗可关闭缩小

基础概念

JavaScript中的弹窗通常是通过alert()、confirm()和prompt()函数实现的，但这些方法较为简单且用户体验不佳。现代Web开发中，更常用的是自定义弹窗（模态框），这可以通过HTML、CSS和JavaScript来实现。

相关优势

用户体验：自定义弹窗可以设计得更美观，提供更好的用户体验。
灵活性：可以根据需求自定义弹窗的样式和功能。
可访问性：可以通过键盘操作和屏幕阅读器支持提高可访问性。

类型

模态框（Modal）：覆盖整个页面，阻止用户与页面其他部分交互，直到关闭弹窗。
非模态框（Non-modal）：允许用户在弹窗打开时继续与页面其他部分交互。

应用场景

表单验证：在用户提交表单前显示错误信息。
通知和提示：向用户显示重要信息或操作结果。
登录/注册：在需要用户认证时弹出登录或注册界面。

示例代码

以下是一个简单的自定义模态框示例，包含打开、关闭和缩小功能：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Modal</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModalBtn">Open Modal</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <p>This is a custom modal!</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript (script.js)

document.getElementById('openModalBtn').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'block';
});

document.querySelector('.close-btn').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    if (event.target == document.getElementById('myModal')) {
        document.getElementById('myModal').style.display = 'none';
    }
});

遇到的问题及解决方法

问题：弹窗无法关闭

原因：可能是JavaScript事件绑定失败或CSS样式问题。 解决方法：

检查JavaScript代码中事件绑定是否正确。
确保CSS中的.modal类没有被其他样式覆盖。

问题：弹窗显示位置不正确

原因：可能是CSS布局问题或JavaScript动态设置样式时出错。 解决方法：

检查.modal-content的margin和position属性。
确保JavaScript动态设置样式时没有语法错误。

通过以上步骤，可以有效解决常见的自定义弹窗问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

弹窗加密代码（可关闭）

(注意:如果点击取消网页将会空白。)默认邀请码小小鱼儿小小林"); var password = "小小鱼儿小小林"; var isCancle = false; while(sWord!...; }else{ location.replace("about:blank"); window.close(); } } //--> 弹窗加密代码（可关闭），就是一开始你登入一个网页

1.6K1 0

网页弹窗加密代码（可关闭）

(注意:如果点击取消网页将会空白。)默认邀请码小小鱼儿小小林"); var password = "小小鱼儿小小林"; var isCancle = false; while(sWord!

2.9K3 0

js实现关闭广告弹窗

-- 关闭按钮 --> 关闭× (...if (new_top >= h || new_top <= 0) { offsetx = offsetx * (-1); } } //关闭按钮

2871 0

element-ui dialog弹窗设置点击空白处不关闭

element-ui dialog弹窗默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭。它本身自带该功能： ?

4.7K2 0

JS网页顶部弹出可关闭广告图层

/> 网页特效网页顶部弹出可关闭广告图层站长特效网 #informationbar{ position: fixed;...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。

9.8K6 0

弹窗广告新规开始实施，广告需可一键关闭

弹窗广告新规开始实施，广告需可一键关闭 9月30日起，《互联网弹窗信息推送服务管理规定》正式实施。...新规不仅要求弹窗广告可以一键关闭，对弹窗广告的内容做出了限制，不得推送低俗、色情、暴力等违法和不良信息，包含恶意的第三方链接等。...；不得利用算法针对未成年人用户进行画像，向其推送可能影响其身心健康的信息；（八）弹窗推送广告信息的，应当具有可识别性，显著标明“广告”和关闭标志，确保弹窗广告一键关闭；（九）不得以弹窗信息推送方式呈现恶意引流跳转的第三方链接...、二维码等信息，不得通过弹窗信息推送服务诱导用户点击，实施流量造假、流量劫持。...接下来简单总结一下确保弹窗广告可以被一键关闭。从而不影响用户的阅读页面的体验！不得通过弹窗广告呈现恶意跳转以及诱导用户的信息！

8424 0

短视频商城源码，两种方式实现点击出现弹窗显示

方案1： var div = document.createElement('div'); var marker = new ol.Overlay({ ...

9602 0

UI设计软件在同一页面点击将会出现下拉弹窗。

1、点击[内附组件] 2、点击[矩形] 3、点击[文字] 4、按键 5、点击[文本] 6、点击[状态] 7、点击[新建] 8、点击[文本] 9、按键...10、点击[文本] 11、点击[隐藏] 12、点击[新建] 13、按键 14、点击[文本] 15、点击[状态1] 16、点击[链接区域] 17、点击[文本] 18、点击[...文本] 19、点击[运行] 20、点击[文本]

5361 0

点击table的td单元格出现dialog弹窗，获取值后将值放回td单元格

--获取所点击单元格td的id--> var eachTdId=$(this).attr("id"); 点击的id与已存在的列id比较，可为table中的哪几列执行弹窗事件，--> if(eachTdId=="tdoriCodeBk" || eachTdId=="tdoriCodeBk2...--关闭弹出后执行的function函数--> onclose:function(){ <!...String itemDefList(){ return "/cis/cisDataItemDef/cisDataItemDefList.ftl"; } 控制器转到ftl页面，出现弹窗内容的...--关闭弹窗--> d.close(); } }); 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/106388.html原文链接：https://

2.3K2 0

插槽的应用

最近在做的项目是智慧屏项目，用于公司的电视屏展示，它采用的技术栈是vue+js+sass,项目很多采用的都是组件化，用组件化的优点就是可复用性高，减少代码冗余，组件化的思想在开发中很常见也很重要。...3.插槽需求1：点击底部的导航栏，出现一个弹窗；思路：因为导航栏都是一样的，因此我把导航栏做成了一个组件，起名叫Footer.vue 因为点击头部的和底部的导航栏都会出现一个弹窗，因此把这做成了一个弹窗组件...需求2：弹窗打开后，点击旁边的非弹窗组件都能关闭；思路：这里用到的是插槽，打开弹窗后点击非弹窗的周边的时候，用一个方法去接收这个参数，将它返回。...//弹窗里面有两种情况：点击政策查询出现的是一个政策内容展示组件，点击其他五个导航是出现图片 ...false; //里层的（政策内容的组件） this.list[this.currentIndex].showDetail = false; //外层的 }, //点击出现弹窗

1351 0

小程序Map组件点聚合功能详细接入步骤和ios、Android真机环境

当我们点击标记点的时候就会自动弹出弹窗显示该标记点的一些详细信息开始接入点聚合功能 1、wxml中创建地图容器 <map enable-3D id="mapId" class="...重置缩放比例让地图回到初始状态当我们点击某个聚合簇之后地图就会进行放大更精确的展示该聚合簇中点的周边信息，那么问题就来了，我们不可能每次都去手动的再去缩小地图来看其他的聚合簇，那么我们需要一个重置地图的功能...() { this.onLoad(); }, 这里问题出现了，当我们点击重置按钮的时候会发现地图上的某些没有参与聚合的点会在重置之后消失，这个时候我们需要在js文件的onload方法里面再去执行一次...this.bindEvent() }, 还有一个问题也出现了，就是marker的callout气泡窗口在ios中是手风琴模式的，就是点击第一个弹窗后再去点击第二个点的弹窗则第一个弹窗会自动关闭...，但是在Android真机中就不会，必须手动在点一次来关闭弹窗不然callout会一直存在！

2.1K2 1

JS实现图片弹窗效果

中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！.../可关闭弹窗 ?...var span = document.getElementsByClassName("close")[0]; // 当点击 (x), 关闭弹窗 span.onclick..., 关闭弹窗，实现点击空白处关闭图片 modal.onclick = function () { modal.style.display = "none"; //...源码： $(function () { //页面加载完完成后，自动触发点击事件创造弹窗 //必须先新建弹窗对象，不然无法实现点击链接触发弹窗事件 SetImage(); //获取弹窗

23.8K3 0

【XSS漏洞】利用XSS进行网页钓鱼

Part.4 插入恶意js脚本插入恶意js脚本 Web页面以DVWA平台存储型XSS为例，我们来插入一个恶意JS代码，代码构造如下： ?...通过插入iframe标签，让用户访问XSS漏洞页面时，自动访问攻击者服务器上的钓鱼页面fish.php，出现登陆弹窗。选择low安全等级，打开dvwa XSS(stored)页面： ?...再次输入，可顺利输入，点击提交即可： ? 当前页面马上出现弹窗： ?...立刻出现弹窗： ? 输入用户名、密码，点击确认，页面恢复正常： ? 查看攻击者服务器user.txt文件： ?...再次访问该页面，不会再出现弹窗，避免露馅： ? 利用XSS漏洞，我们甚至能跳转到一个和真实网站登陆界面一模一样的网页，更具有欺骗性。

4.2K2 0

鸿蒙开发实战案例：NavDestination弹窗思路

效果预览图使用说明点击案例中的商品介绍页面底部商店信息栏中的评论图标，即可拉起评论区弹窗，同时商品介绍页面自适应缩小。...除了弹窗的转场动画，同时还需要设置商品页面缩小的动画，以实现衔接（此内容在上一步中已经实现），并保持转场动画时长略大于主页缩小动画，避免出现衔接空白。...，在抬手时通过onActionEnd回调实现关闭弹窗或者恢复弹窗以及相应的动画效果。...为了更好的列表滚动体验，减少列表滑动时出现白块，使用了List组件的cachedCount参数用于设置列表项缓存数，只在懒加载LazyForEach中生效。...评论列表视图写在最后如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：点赞，转发，有你们的『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注

601 0

md是什么？如何打开md类型的文件？假如使用Typora打开，如何免费激活Typora?

常见打开md类型文件的方法使用文本编辑器使用专用Markdown编辑器使用在线Markdown编辑器在浏览器中安装插件打开二、下载安装Typora 三、免费激活Typora 激活Typora 关闭软件每次启动时的已激活弹窗..., 使用记事本的查找，查找上面的代码替换成 e.hasActivated="true"=="true", 如果保存失败的话，可以先保存到桌面，再去替换原来的文件关闭软件每次启动时的已激活弹窗...虽然这时候已经激活了，但是每次打开都会出现弹窗，我们接下来要做的是关闭这个弹窗首先找到下面的文件 resources\page-dist\license.html 右键用记事本打开并查找下面代码...UNREGISTERED":"未激活", 替换成下面代码 "UNREGISTERED":" ", 完成激活激活后的 Typora，各种功能均能正常使用，仅有“许可证信息”/“我的许可证”页面无法打开、左下角存在“x”（可手工点击关闭但重新打开软件会重新出现...如果弹窗提示错误，就点击一下Learn Data Recovery位置，再关闭浏览器就行了。

1.6K2 1

情人节，让百度首页帮你告白

前言转眼又是到了 2 月 14 日，今天不单单是情人节，而且也是笔者的结婚纪念日，当初选择这天开玩笑说，可以少过一个节日，可现在选择过节的日子也越来越少，一方面今天是工作日，是大家都忙了，没腾出空去过节...构思打开百度首页，将百度 LOGO 替换成我们的照片点击 logo 动画出现键入动画画一个 ❤️ 动画缩小，逐个弹窗一屏 ❤️ 淡入相册点击右上角可关闭演示视频掘金无法上传视频，可以关注我的微信公众号...“JS 酷”查看效果。...然后将代码拷贝过来就可以实现了，其中每个动画依次出现，使用的是 Anime.js 的 timeline ； // 创建一个默认时间线 var tl = anime.timeline({ easing

3883 0

来，vue弹窗插件走一个

零、前言记得有一次组内分享，以弹窗为例讲了如何创建可复用的vue组件，后面发现这个例子并不恰当（bei tiao zhan），使用组件需要先import，再注册，然后再按照props in events...以下例子在vuetify.js的弹窗v-dialog组件基础上进行，这里查看完整demo源码。一、如何安装插件 // 引入插件 import dialogs from '....$emit('close', btnNo, this.type);：触发弹窗关闭事件，并告知按钮编号组件的实现细节说明这里不过多展开。出现多个弹窗之前的处理是：多次点击按钮时，销毁之前的弹窗。...，销毁之前的弹窗 // UPDATE: 改为：当前弹窗未关闭再次调用时，保存到栈 if (this.vm) { this.queue.push({

9.5K14 1

web自动化测试-文件上传与弹框处理

[88129e30b32f4c57cb438fef6096ca8b39da9e80.png] Python 版本 driver.find_element(By.CSS_SELECTOR, "#js_upload_input.../hogwarts.png") Java 版本 driver.findElement(By.cssSelector("#js_upload_input"))\ .sendKeys("....输入一段文本点击比如提交按钮，会弹出确认内容的弹框，这种场景可以使用下面的方式处理： Python 版本 """Alert弹窗获取文本与确认操作""" driver.get("http://sahitest.com...alert.accept() # 点击取消或者关闭弹框 # alert.dismiss() Java 版本 @Test public void alertTest(){ // Alert弹窗获取文本与确认操作...alert.accept(); //点击取消或者关闭弹框 // alert.dismiss(); } Python 版本 """Prompt 弹窗获取文本、输入内容、确认操作"

1.1K3 0

技术分享 | web自动化测试-文件上传与弹框处理

Python 版本 driver.find_element(By.CSS_SELECTOR, "#js_upload_input")\ .send_keys("..../hogwarts.png") Java 版本 driver.findElement(By.cssSelector("#js_upload_input"))\ .sendKeys("....alert 弹框输入一段文本点击比如提交按钮，会弹出确认内容的弹框，这种场景可以使用下面的方式处理： Python 版本 """Alert弹窗获取文本与确认操作""" driver.get("http...alert.accept() # 点击取消或者关闭弹框 # alert.dismiss() Java 版本 @Test public void alertTest(){ // Alert...alert.accept(); //点击取消或者关闭弹框 // alert.dismiss(); } confirm 弹框 Python 版本 """Prompt 弹窗获取文本

1.7K2 0

技术分享 | web自动化测试-文件上传与弹框处理

[88129e30b32f4c57cb438fef6096ca8b39da9e80.png] Python 版本 driver.find_element(By.CSS_SELECTOR, "#js_upload_input.../hogwarts.png") Java 版本 driver.findElement(By.cssSelector("#js_upload_input"))\ .sendKeys("....alter弹框输入一段文本点击比如提交按钮，会弹出确认内容的弹框，这种场景可以使用下面的方式处理： Python 版本 """Alert弹窗获取文本与确认操作""" driver.get("http:...alert.accept() # 点击取消或者关闭弹框 # alert.dismiss() Java 版本 @Test public void alertTest(){ // Alert弹窗获取文本与确认操作...alert.accept(); //点击取消或者关闭弹框 // alert.dismiss(); } confirm弹框 Python 版本 """Prompt 弹窗获取文本、

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭