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">×</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动态设置样式时没有语法错误。
通过以上步骤，可以有效解决常见的自定义弹窗问题。
相关·内容
1回答
单点触控的照片/图像查看器
、、、、
我用谷歌搜索了一下，但找不到一个简单的图像查看器类来在我的MonoTouch应用程序中使用。我只需要一个图像查看器来显示一个UIImageView，允许常见的全屏/缩放操作。在新的中托管这样的组件也很有用
浏览 0提问于2013-03-03得票数 12
回答已采纳
3回答
我正在显示一个登录表单并验证按钮点击，并希望隐藏登录面板并显示主面板。
但是，当我单击该按钮时，登录面板会消失，但主面板不会出现。由于没有可显示的内容，表单窗口将缩小到只有最小化/最大化/关闭按钮。
浏览 0提问于2012-02-07得票数 6
回答已采纳
1回答
我正在建立一个移动网络应用程序，使用jQuery和hammer.js的触摸控制。hammer.js有一个名为"prevent_default“的功能，它可以关闭Safari的滚动/缩放/漂亮的所有功能。我有一个带有表单的页面，该表单使用< input >作为文本字段，还有一个javascript侦听器，当您点击该表单时，它会调用.focus()。
这一切在某种程度上都运行得很好。页面固定在适当的位置，看起来非常漂亮，当你点击一个表单域时，它会放大，iOS键盘就会<
浏览 3提问于2012-10-25得票数 1
我使用gmaps.js在一个基于twitter引导的站点中创建地图，而谷歌地图没有出现放大/缩小按钮。我还注意到，当您单击标记时，“x”关闭按钮不会出现。这是到页面的链接。
任何帮助都将不胜感激。
浏览 2提问于2013-08-02得票数 1
回答已采纳
目前，我正在开发适用于安卓和IOS的web应用程序(Backbone.js上的jQueryMobile)。为了提高性能，我尝试在这些设备上消除300ms的点击延迟。name="viewport" content="width=device-width, user-scalable=no">
上面的meta代码做了trick.once chrome识别用户放大/缩小在页面中不可用它工作得很好，除了一种情况下，事件处理程序改变了DOM元素，不知何故在我点击的地方出
浏览 2提问于2015-03-26得票数 0
7回答
我为这个愚蠢的疑问感到抱歉。(我故意在这里犯了一个错误，我知道代码中的正确解决方案)。
任何设置帮助都将不胜感激。
浏览 1提问于2014-09-07得票数 11
我有一个HTML表，我已经在其中添加了一系列交互行为(可添加、可移除、可移动列、重命名列等)。最后一块拼图是可调整大小的列。我主要是通过允许用户在5px的边框内点击，然后拖动鼠标来实现的。我的问题是，当调整一列的大小时，其他列会增大或缩小，以补偿并保持表的宽度。我想要的行为是按照调整列大小的量来扩大(或收缩)表，并且不调整任何其他列的宽度。对于CSS/JS，这是可能的吗？
浏览 3提问于2012-11-21得票数 3
回答已采纳
隐藏的<div>中有一些输入字段，其中包括按钮
当我第一次点击“添加”时，div就会像它应该显示的那样出现。我通过按“取消”关闭div，然后重新单击“添加”，div会显示尺寸缩小的按钮。
浏览 0提问于2012-08-07得票数 1
回答已采纳
直到今天，我的js文件都无法通过请求加载，这是因为需求决定给每个js一个'.map‘文件扩展名，而不是'.js’。我将'.js‘添加到路径中只是为了查看，然后因为它指向'jquery.min.js.js’而仍然失败。
我很困惑为什么这一切会毫无理由地突然改变。有人有什么想法吗？好的，所以我完全去掉了require.js，现在我得到了与'.map‘相同的缺失错误。我在safari中打开了它(我使用的是铬)，我完全没有收到这
浏览 5提问于2013-08-23得票数 7
回答已采纳
点击第1页上一个启用了镁的链接--弹出窗口。关闭弹出并再次单击也很好。
在第1页上点击一个允许扩展的链接--弹出窗口不会出现。点击第1页上一个启用了镁的链接--弹出窗口。关闭</em
浏览 4提问于2015-09-13得票数 1
1回答
如果我调整了桌面浏览器的大小，移动导航就能正常工作，但如果我在iPhone上打开它，链接就无法点击。它们是长按的(例如，我可以在新的标签页中打开)，但在我的iPhone上，无论是在Safari还是在Chrome浏览器中，点击它们都不起作用。 display: none; background-color: #2e323f;菜单“hamburger menu.js”有一个js文件，但它有1600行:
浏览 12提问于2017-02-12得票数 0
回答已采纳
但是，弹出窗口不会覆盖整个屏幕，因此背景中的按钮是可见和可单击的。这里有一个主页按钮。当我点击后台的主页按钮时，Facebook弹出窗口没有关闭，应用程序返回到后台的主页屏幕。我想在弹出窗口关闭的情况下返回到主屏幕，或者在弹出窗口打开时使主页按钮不可点击。如果我在Facebook弹出窗口出现时在后台禁用该按钮，则无法知道用户关闭了该弹出窗口，因此我可以启用该按钮。有没有办法让Facebook全屏弹出窗口，或者知道弹出窗口已经关闭。？谢谢
浏览 5提问于2012-07-26得票数 0
一切正常，但是在某些时候(大约40到50次点击之后)，整个地图变得不可点击。如果缩小，功能将再次变为可单击，但在多次单击后(我猜不超过3次)，它将再次切换。每张地图或每分钟的点击事件数是否有限制？我在GM JS API和Fusion API中都没有找到。已在装有最新版Opera和Firefox的Windows XP SP3上进行测试。
浏览 2提问于2012-02-13得票数 0
回答已采纳
当我开发iOS应用程序时，我想知道为什么苹果不支持应用程序中的自动关闭键盘功能。这意味着，如果我在屏幕上实现了一个TextLabel，我点击这个标签，键盘就会出现，但不会自动关闭。我认为，当用户在键盘屏幕外点击或点击屏幕上的“完成”按钮时，许多应用程序键盘都需要取消。但是，基本上，我必须在每个ViewController上实现键盘退出功能。我认为这是代码复制。任何人都可以向我解释苹果的应用方法实现理念，以及我如何编写一个可重用的函数，而不是在每个ViewControll
浏览 3提问于2015-06-30得票数 0
回答已采纳
因此，当用户点击它的第一个按钮时，就会出现警告，提示是开当用户点击它的第二个按钮时，弹出一个警报，当他们关闭时会显示ON1，并显示OFF2这是js selected = $(this).val();
if
浏览 1提问于2013-03-27得票数 0
2回答
在上，我正在尝试一种方法，当你在手机上点击一张图片时，它会让文本和一个按钮出现在图片下方。如果你再次点击它，它就会消失。 $(function () { $('#action').click(functi
浏览 0提问于2015-05-21得票数 1
当我点击像矩形这样的形状时，它会变成可拖动的山墙，但当我在它外面点击时，它应该会关闭它的可调整大小的功能。我尝试了模糊功能，但不起作用。我不想把它放在鼠标上。问题是，当我点击矩形时，它会给我提示，但当我点击画布时，它会给我两次提示，因为那个形状是画布的一部分。所以请建议我如何区分点击形状和形状的外部。如何在canvas中找出click事件，kinetic js
浏览 3提问于2014-06-16得票数 0
我有一个聊天组件，它被加载到一个侧栏组件，当我们点击聊天图标上的网站标题。我需要使其可访问，因此我将tabindex =0添加到所有重要部分，如聊天容器上的最小化图标和关闭图标以及所有聊天消息。现在，当我打开聊天，然后再次关闭或最小化它时，这些元素仍然按tabing顺序出现，屏幕阅读器会读取它们。当聊天被最小化/关闭时，我如何防止焦点转移到这些元素上？
浏览 6提问于2021-05-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
