开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js带关闭按钮的弹窗

基础概念

JavaScript中的带关闭按钮的弹窗通常是通过创建一个覆盖整个页面的半透明背景层（通常称为“遮罩层”或“蒙版”），并在其上放置一个包含内容的弹窗框来实现的。用户可以通过点击关闭按钮来隐藏弹窗。

相关优势

用户体验：弹窗可以吸引用户的注意力，用于重要通知或提示。
交互性：用户可以直接在弹窗中进行操作，提高了交互效率。
灵活性：可以根据需要自定义弹窗的样式和内容。

类型

模态弹窗：阻止用户与页面其他部分交互，直到弹窗关闭。
非模态弹窗：允许用户在弹窗打开的同时与页面其他部分交互。

应用场景

表单验证错误提示。
用户登录或注册。
重要通知或警告。
引导教程或帮助信息。

示例代码

以下是一个简单的JavaScript示例，展示如何创建一个带有关闭按钮的模态弹窗：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal Popup Example</title>
<style>
    /* 遮罩层样式 */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    /* 弹窗框样式 */
    .modal-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    /* 关闭按钮样式 */
    .close-btn {
        float: right;
        cursor: pointer;
    }
</style>
</head>
<body>

<button onclick="openModal()">Open Modal</button>

<div class="modal-overlay" id="modalOverlay">
    <div class="modal-box">
        <span class="close-btn" onclick="closeModal()">X</span>
        <p>This is a modal popup!</p>
    </div>
</div>

<script>
function openModal() {
    document.getElementById('modalOverlay').style.display = 'block';
}

function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
}
</script>

</body>
</html>

遇到的问题及解决方法

问题：弹窗打开后页面背景滚动。

原因：当遮罩层显示时，用户仍然可以滚动页面背景。

解决方法：

function openModal() {
    document.getElementById('modalOverlay').style.display = 'block';
    document.body.style.overflow = 'hidden'; // 禁止背景滚动
}

function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
    document.body.style.overflow = ''; // 恢复背景滚动
}

通过这种方式，可以有效地控制弹窗的行为和页面的交互，提升用户体验。

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

有帮助

没帮助

相关·内容

js实现关闭广告弹窗

-- 关闭按钮 --> 关闭× (...var new_left = parseInt(eft) + offsety; box.style.left = new_left + 'px'; //判断当图片的边界...if (new_top >= h || new_top <= 0) { offsetx = offsetx * (-1); } } //关闭按钮

2871 0

dialog使用案例，包含增加按钮关闭弹窗

js--> function dialogInfo(title,width,height,url){ a = top.dialog

1.4K2 0

WPF使用Storyboard做个带旋转特效的关闭按钮

见过迅雷7右边广告的关闭按钮，鼠标移上去的话有个旋转90度的效果，感觉挺酷的，于是用WPF也实现了一下。很简单，定义几行XAML就搞定了。...WPF做这种效果还是很好使的~~ 用SL封装了个效果： <Image Width="20" Height="20" Source="image\close.png" ...ToolTip="关闭" Opacity="0.5" Canvas.Left="720" Canvas.Top="3" MouseLeftButtonDown... 其中给图片定义个旋转的变化...当鼠标进入的时候触发器触发故事板在0.2秒时间内使图片以中心为圆点旋转90度。SO EASY!!

1.6K3 0

laravel-admin自定义列表按钮，并带swal弹窗效果

function() { var id = $(this).data('id'); swal({ title: "确认通过该用户的退款申请吗...class='fa fa-check'>退款"); } }); return $grid; } ajax中请求的路由里处理确认后的逻辑

2.3K1 0

如何关闭WPS的弹窗广告？

本期就来分享如何彻底关闭WPS的广告。 WPS是一个金山的免费办公软件，虽然免费，但是老是弹出广告窗口也是很烦人。虽然在弹出的窗口有一个弹窗选项可以改，但是好像也是没啥用处。 ?...这里就介绍一下如何彻底关闭WPS弹窗，首先点击开始，所有程序，找到WPS office。 ? 然后点开WPS OFFICE工具，点击配置工具 ? 点击高级。 ?...然后选择最后的其他选项，去掉软件推荐下的小勾，最后点击确定就可以了。 ? 如果你还怕软件的弹窗死灰复燃，那还可以打开火绒杀毒，在扩展工具内，有一个弹窗拦截工具。 ?...首次打开时会自动搜索可能的弹窗默认帮你拦截，如果有时遇到没拦截到的弹窗，可以打开软件，手动添加窗口拦截。 ? 以后就让弹窗拦截一直运行即可拦截基本上的软件弹窗啦！

7.3K3 0

如何关闭烦人的电脑弹窗？火绒弹窗拦截功能为您解忧！

序言：这年头谁电脑上要没有几个烦人的弹窗广告，都不好意思说用过电脑，那么问题来了，到底如何处理各种各样的弹窗广告呢，今天小编和大家分享一下解决方法，包你药到病除。...解决方法：至目前为止，发现最好用的弹窗拦截工具就是火绒杀毒软件自带的弹窗拦截工具，它可以很好的屏蔽弹窗广告，让你更嗨皮的工作和娱乐。...（1）打开主界面，选择“安全工具”选项（2）选择“弹窗拦截”选项（3）开启“拦截不受欢迎的弹窗”。...（4）然后就能愉快的上网了。备注： 1、若是电脑上之前已经安装了其它杀毒软件，先卸载再安装火绒，不然2个杀毒软件有冲突，电脑也会变得很卡。...2、偶尔发现弹窗不管用了，先查看右下角拦截弹窗的图标是否存在，若没有哦请按照上述方法查看弹窗拦截功能是否正常开启，因为我偶尔会发现有这种情况。

2.8K1 0

前端SweetAlter弹窗js的使用

并且，是全js操作，也即不用再html写任何标签。...Npm npm install sweetalert 浏览器 js...swal({ text: '你好，欢迎访问迷思雨 misiyu.cn' }) 带按钮 ?...swal({ text: '你好，欢迎访问迷思雨 misiyu.cn', button: true, }) 带图标 ?...图标有： success error info warning 更改按钮文字默认是英文的，但是我们可以改成中文 ? swal({ text: '确认删除吗？'

5.7K3 0

一行js弹窗代码就能设计漂亮的弹窗广告

接到一个设计需求，要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动，找了半天都没看到合适的，自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告，来瞧一下，欢迎拍砖提意见，js弹窗广告代码如下：...2014/images/zj_pf.jpg' border=0>关闭...X"); 　　把上面的代码加到js中，网址和图片路径自己修改。　　...F6F6F6; text-align:center; cursor:pointer; } .divclose2 img,.divclose1 img{ cursor:pointer; } 　　js...弹窗广告代码的css样式自己调整哈　　一行js弹窗代码就能设计漂亮的弹窗广告，是不是很简单？

9.7K8 0

QT对话框去掉帮助和关闭按钮拦截QT关闭窗口的CloseEvent

建了一个对话框，我不想把边框去掉，只想去掉关闭按钮， setWindowFlags(windowFlags()&~Qt::WindowCloseButtonHint&~Qt::WindowContextHelpButtonHint...); 结果那个问号的按钮去掉了，但是关闭按钮还在，求助啊 setWindowFlags(Qt::WindowTitleHint | Qt::CustomizeWindowHint | Qt::WindowMinimizeButtonHint...类下有一个虚函数 void QDialog::closeEvent ( QCloseEvent * e ) [virtual protected] 通过实现closeEvent函数，就可以以对关闭窗口消息进行拦截...QDialog { Q_OBJECT public: ClientTest(); void closeEvent(QCloseEvent *event); //后边的具体实现省略

7.4K2 0

js封装好的模仿qq消息弹窗代码

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。直接贴代码： <!...{ return this.title; }, getContent:function(){ return this.content; }, show:function(){ //弹窗...FFCC00; font-weight:bold; text-align:left; font-size:14px;'; _winPopDiv.appendChild(_titleDiv); //关闭消息按钮...this.getContent(); _winPopDiv.appendChild(_conDiv); document.body.appendChild(_winPopDiv); //关闭

4.8K2 0

超好用的JS弹窗库 sweetalert2

您现在还可以尝试取消, ' + 'links ' + '以回看您的注册信息..., cancelButtonAriaLabel: 'Thumbs down' }) 图片特殊说明：以上文章，均是我实际操作，写出来的笔记资料，不会盗用别人文章

5.3K3 0

用CSS制作可交换带事件处理的图片按钮

按钮是网页最常用的控件了，怎样设计一个更好看的按钮，这两天试验了几种方法： 1、用Javascript交换图片的方式先在网页中制作图片，然后把图片转换为服务器端控件，为该控件添加事件处理...2、按钮在交到页面时，其实就是一个input，那么用css写一个样式就ok了。结果，发现客户端的页面中，按钮的ID虽然是原来的ID，但是写的CSS并没有起作用。...原来，.net自己为按钮加了一个style，优先级显然比自定义的要高了。看来得想办法把系统自动加的style屏蔽掉才行。 ...3、再试HyperLink，为它写css，结果图片交换没有问题，可是又无法把按钮事件加上。 4、最后，用LinkButton，仍然以LinkButton的ID写css，然后把文字去掉。...也许还有更好的办法吧，不过这样已经比较简单了。只要改css就基本搞定一切了。

1.4K5 0

【案例】js全选反选按钮的实现

效果图思路全选首先要使给全选按钮设置一个点击事件，在点击选中时可以使下面的每个多选按钮都选中。...让每个多选按钮checked的状态都和全选按钮一致反选首先给每个多选按钮设置一个点击事件，让每个多选按钮都选中时全选按钮也被选中可以先给全选按钮设置选中，然后判断一下如果有多选按钮没有被选中，...则令全选按钮也不被选中实现文字改变使用三元运算符判断当前的先择状态，在根据状态给文字设置内容代码实现 <!

4.8K3 0

button按钮Sweet Alert弹窗一闪自动消失的踩坑实录

项目中使用了 Sweet Alert 插件，今天在一个页面中发现了问题，点击提交按钮，正常应该弹窗，然后点击按钮跳转页面的。...但是点击 button 按钮，Sweet Alert 弹窗闪了一下就消失了，也不能正常跳转页面，很是奇怪，找了半天，也没发现问题。 ?...js 代码： swal({ title:"修改成功！", text: "请使用新密码登陆。"...Sweet Alert 加载弹窗定时自动关闭：文档里面有一个 timer 属性：定时关闭弹窗的计时器，单位为ms（毫秒）。 swal({ title: "正在查询中!"...：Sweet Alert弹窗插件的安装及使用详解笔记声明：本文由w3h5原创，转载请注明出处：《button按钮Sweet Alert弹窗一闪自动消失的踩坑实录》

3.5K1 0

WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮

在C#的WinForm程序中，有的时候需要判定关闭请求从哪里发出来的。比如是用户点击了右上角的“关闭”按钮，还是调用了WinForm.Close()方法。...最典型的是要知道点击右上角的“关闭”按钮发出的事件。...msg.Msg == WM_SYSCOMMAND && ((int)msg.WParam == SC_CLOSE)) { // 点击winform右上关闭按钮... // 加入想要的逻辑处理 return;//阻止了窗体关闭 } base.WndProc(

2.9K1 0

WinForm 最大化、最小化、关闭按钮事件的拦截

private int WM_SYSCOMMAND = 0x112; private long SC_MAXIMIZE = 0xF030; private lo...

1.4K1 0

Vue组件封装及引用，封装一个带参数的弹窗组件

Vue 是一款国产的非常优秀的前端框架，官方的介绍是： Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。...今天封装了一个带参数的弹窗方法，可以直接调用，自定义图片，提示文字，取消和确定（带参数的方法）。...首先，我在 components 目录下创建一个 CreditConfirmMask.vue 的文件，用来调用。... padding-bottom: 5px; border-bottom: 1px solid #ACACAC; cursor: pointer; } 组件的引用...false, sendMask: { img: '', title: '', id: '',//产品id }, } }, 方法调起：这时候可以将弹窗图片

4.4K4 0

带左右箭头切换div的js 原

(adsbygoogle = window.adsbygoogle || []).push({});

12.5K3 0

jeDate日期控件的使用以及选中后点确定按钮关闭功能

在之前的文章里，jedate-开始使用一款好用的时间插件：https://www.jianshu.com/p/961c3f364e2a，运用这款控件确实省了不少力气，这两年，该控件开发者也在不断的进行更新...，所以在项目中有些引用也相对应的进行了一些改变，今天要实现一个 jeDate日期控件的使用以及选中后点确定按钮关闭功能。...text/css" rel="stylesheet" href="skin/jedate.css"> js...placeholder="结束时间" id="endTime" /> //选中后点确定按钮才关闭

1.7K2 0

servlet向页面输出js弹窗无效的解决方案

Servlet向页面输出js弹窗无效的解决方案 1、获取输出流类 PrintWriter out= response.getWriter(); 2、简写版 //警告弹窗...; 3、标准版 //警告弹窗 out.print("alert('alert提示框!');"); //确认提示框 out.print("confirm('confirm提示框!')...; 5、重点 ---- 必须在结尾处必须调用 out.flush(); 代码，窗口才能实现，不然提示弹窗无效 //必须调用 out.flush(); 使用servlet向jsp输出js提示框对于前端小白来说非常方便

4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭