鼠标点击其他地方时隐藏div

这就是要注册一个document.onclick事件来监控鼠标点击div以外的区域时事件 

你给这个div的id属性赋一个页面唯一的值,比如<div id="globalDiv" /> 
在document.onclick得到事件源,判断这个事件源的id是不是等于"globalDiv" 

document.onclick = function (event)
        {    
            var e = event || window.event;
            var elem = e.srcElement||e.target;
                
            while(elem)
            { 
                if(elem.id == "globalDiv")
                {
                        return;
                }
                elem = elem.parentNode;        
            }
            //隐藏div的方法
            HiddenDiv();
        }

 

 

转载于:https://www.cnblogs.com/xiaoluozi513/archive/2012/05/22/2512884.html

在网页开发中,通常通过JavaScript来实现在用户鼠标点击某个位置弹出窗口(也称为模态框或对话框)。你可以使用HTML、CSS和JavaScript(如jQuery库)结合来实现这个效果。以下是一个简单的示例: ```html <!DOCTYPE html> <html lang="zh"> <head> <title>点击弹窗</title> <style> .modal { display: none; /* 初始隐藏 */ position: fixed; /* 定位为fixed,使其覆盖整个页面 */ z-index: 1; /* 设置层级高于其他元素 */ padding-top: 100px; left: 0; top: 0; width: 100%; /* 宽度100%,填满屏幕 */ height: 100%; overflow: auto; /* 避免内容超出滚动条 */ background-color: rgba(0,0,0,0.4); /* 背景半透明黑色 */ } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } </style> </head> <body> <button id="myBtn">点击这里</button> <div id="myModal" class="modal"> <div class="modal-content"> <p>这是一个弹窗的内容。</p> <button type="button" onclick="closeModal()">关闭</button> </div> </div> <script> function showModal() { var modal = document.getElementById("myModal"); modal.style.display = "block"; } function closeModal() { var modal = document.getElementById("myModal"); modal.style.display = "none"; } document.getElementById("myBtn").addEventListener("click", showModal); </script> </body> </html> ``` 在这个例子中,当用户点击id为`myBtn`的按钮,会触发`showModal`函数,显示弹窗。点击弹窗内的“关闭”按钮或页面其他地方,会触发`closeModal`函数,让弹窗消失。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值