div 弹出框 点击周围空白处消失

html代码

<div id="detailMsg" class="showDiv"  style="margin: 0 0 0 200px;">
    ....  //弹出框内具体内容省略
</div>

js代码(引入jquery)

$(function () { $("#detailMsg").click(function(e){
	e= e || window.event;
	if(e.cancelBubble)
	    e.cancelBubble = true;
	else
             e.stopPropagation();
 });

 $("body").click(function(){
	$(‘#detailMsg‘).css("display","none");
 });});

  

  

  

div 弹出框 点击周围空白处消失

时间: 2024-10-07 08:03:59

div 弹出框 点击周围空白处消失的相关文章

dialog弹出框 点击周围空白处弹出层不自动消失

dialog.setCanceledOnTouchOutside(false);// 设置点击屏幕Dialog不消失 dialog弹出框 点击周围空白处弹出层不自动消失

使用easydrag实现可拖动的DIV弹出框

最近在工作中遇到了jquery的easydrag插件,我有一种相见恨晚的赶脚!easydrag极大的方法我们实现div弹框这个功能,使我爱不释手!在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情!人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV

bootstrap 弹出框点击其他区域时弹出框不消失选项设置

默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果.如下所示: <div class="modal fade" id="myModal" tabindex=&quo

纯JavaScript+HTML+CSS 的div弹出框

CSS <style> .mask { width:100%; height:100%; position: absolute; top:0; left:0; filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; background-color: #ffffff; z-index:2; display: none; } div.sample_popup { height:auto; border:10px solid #64646

phoenixframe自动化测试平台对div弹出框(如弹出的div登陆框)的处理

package org.phoenix.cases; import java.util.LinkedList; import org.phoenix.action.WebElementActionProxy; import org.phoenix.enums.LocatorType; import org.phoenix.model.CaseLogBean; import org.phoenix.model.UnitLogBean; /**  * div形式的弹出框的处理,如登陆  * @aut

弹出框组件,可拖拽

/** * 弹出框组件 */ (function($) { var Utils = { showMask: function() { var $mask = $("#mask"); if( $mask.length === 0 ) { $('body').prepend("<div id='mask' class='mask'></div>"); } $("#mask").css({ width: Math.max(doc

Bootstrap弹出框

弹出框3要素 modal-headermodal-bodymodal-footer <!--促发弹窗--> <a href="#" data-toggle="modal" data-target="#about">点我弹出</a> <!--弹窗代码--> <div class="modal fade" id="about"> <div cla

cocos2dx2.2.2弹出框的实现

在上一篇文章中,我们利用CCEditBox实现了输入框功能,使我们在注册时可以输入用户名和密码.但是当用户名和密码的输入不符合规范时,我们应该怎样给与用户提示呢?下面我们就来介绍弹出框的实现方式. 我们的思路就是,创建一个模态层,将当前场景的内容盖住,然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮.首先,我们先来看一下效果. 这里的标题和具体提示信息需要是自定义的,才能满足不同场景的需要,而确定按钮只是用来关闭弹出层的,所以这个弹出框的主要元素并不多,实现起来也比较简单. 另外,还有

div弹出层的效果带关闭按钮

下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .tcck { width: 440px; height: 132px; border: 1px solid #6E665A; border-radius: 5px; background: #fff; padding-top: 10px; position: absolute; z-index: 9999999