`

点击其他地方隐藏popup窗口

    博客分类:
  • js
 
阅读更多

现在系统有一个弹出的日期选择窗口, 要求在窗口弹出后, 点击窗口以外的地方,窗口要隐藏

 

解决方法代码

 

 

              $("#dateimg").click(
                     function(event){
                         new Calendar(null, null, 0).show($("#dateinput")[0],$("#dateimg")[0]); 
                         event.stopPropagation();
                     }
              );
              
              $("html").bind("click", function(){
                  if($("#__calendarPanel").is(":visible")){
                        $("#__calendarPanel").hide();
                  }
              });

$("#__calendarPanel").bind("click", function(event){event.stopPropagation();});

 

__calendarPanel是弹出窗口的div id

实际上就是在整个页面范围内绑定点击事件, 

dateimg是图片, 点击它就会弹出窗口,之所以加

event.stopPropagation();

是为了阻止事件向上传播到html,假如传播到html的话 窗口一弹出马上又会隐藏的

 

 

 

$("#__calendarPanel").bind("click", function(event){event.stopPropagation();});

这句是说在窗口内部阻止事件向上传播, 阻止html的click事件,不然窗口就没法用了,因为一点就会隐藏,

但是在我自己的代码中,没有加这句话也没事,应该是因为弹出的div里面包着的是一个iframe, 我的点击实际上发生在ifame里, 那么html .click事件没有绑到iframe上?!

 

 

 

0
0
分享到:
评论

相关推荐

    C#自定义控件--Popup窗口提醒完整源码-G3F.rar

    - 源码中可能包含了自定义控件的类定义,如`CustomPopup`,其中包含了显示、隐藏Popup的方法,以及位置计算逻辑。 - `PopupContent`可能是用于显示提醒内容的UI元素,如`TextBlock`或自定义控件。 - 可能存在一个...

    jQuery popup javascript 弹出窗口

    同时,为了实现“点击其它地方自动隐藏”的功能,需要监听整个文档的点击事件,并判断点击位置是否在弹出窗口内。 5. **浏览器兼容性**:描述中提到此弹出窗口兼容IE和Firefox等浏览器,这意味着开发者已经考虑了跨...

    C#自定义控件--Popup窗口提醒完整源码__(0521).rar

    5. **布局管理**:Popup窗口的位置可能需要动态计算,以确保它出现在合适的地方,例如屏幕中央或者相对于某个其他控件的位置。这需要用到`Point`、`Size`等结构以及布局相关的API。 6. **显示和隐藏**:Popup窗口的...

    无限菜单之 xml+popup 版(IE5.5+)

    一个Popup窗口打开后,当在它的区域以外点击或者另一个Popup窗口被打开时都会自动关闭; Popup窗口是没有焦点的; 用户不能改变Popup窗口大小; Popup窗口中的内容是不能被选择的; ...... 因为这些特征,...

    自定义删除窗口PopupWindow

    这样,当需要在其他地方使用这个删除窗口时,只需调用相应的接口即可。例如: ```java public class PopupManager { public static void showDeletePopup(Context context, View anchor) { // 创建并显示...

    jquery点击弹出窗口特效

    例如,定义一个`showPopup`事件,然后在需要的地方触发它: ```javascript $(document).on("showPopup", function() { $("#popup").fadeIn(); }); $("#openButton").click(function() { $(document).trigger...

    ios开发(Popup View)效果源码分享

    可以使用`UIGestureRecognizer`添加手势识别,比如tap手势,当用户点击屏幕其他区域时,可以自动隐藏Popup View。 为了使Popup View看起来更加专业,你可能还需要添加阴影效果。这可以通过设置view的`layer....

    Jquery弹出窗口,带例子参数说明 非常好用

    这段代码会在用户点击弹出窗口之外的任何地方时关闭窗口,但不会响应点击弹出窗口本身或其子元素的事件。 总的来说,jQuery 结合 AJAX 能够创建功能强大的弹出窗口,不仅可以显示静态内容,还能动态加载数据,提供...

    popup_element.js:小js对象创建模式弹出窗口

    例如,弹出窗口可能会有关闭按钮,需要添加点击事件处理,或者当用户点击页面其他地方时自动关闭。此外,为了提升用户体验,可以添加平滑的过渡动画,使弹出窗口的出现和消失更加自然。 "popup_element.js-master" ...

    Silverlight弹出窗口Demo.zip

    5. **StaysOpen属性**:如果设置为false,Popup会在用户点击其他地方时自动关闭。默认值为true,表示Popup会一直保持打开状态,除非IsOpen属性被设置为false。 6. **Event Handling**:使用Popup时,常常需要监听...

    JavaScript 弹出半透明窗口

    3. **JavaScript逻辑**:使用JavaScript来控制弹出窗口的显示和隐藏。可以添加事件监听器来响应用户的操作,如点击按钮关闭窗口。以下是一个简单的示例: ```javascript document.getElementById('close_popup')....

    VC++隐藏标题栏

    此外,为了给用户提供关闭窗口的途径,你可能需要在窗口的其他地方添加一个关闭按钮或者使用右键菜单。 在实现过程中,可能会遇到一些问题,如窗口失去焦点时无法正确显示或隐藏标题栏,或者在不同屏幕分辨率下窗口...

    PopupWin效果源代码

    同时,为了防止遮挡到其他触摸事件,还可以调用`setOutsideTouchable(true)`,使得PopupWindow外部的点击可以关闭窗口。 在PopupWinActivity中,通常会包含以下关键步骤: 1. 初始化PopupWindow对象,传入自定义...

    鼠标点击弹窗2_jq效果_

    使用`.show()`方法将隐藏的div显示出来,如果你想在点击其他地方时关闭弹窗,可以添加一个点击事件监听整个body,然后检查点击位置是否在弹窗内: ```javascript $(document).on('click', function(event) { if (!...

    JQUery弹出div层窗口,附带jquery的js文件,可以直接运行

    此外,它也可能包含了关闭弹窗的功能,比如当用户点击除弹窗外的其他地方或再次点击按钮时,弹窗消失。 `banner.bmp`和`logo.gif`是图像文件,它们可能是网站的品牌标识或者装饰元素,用于增强网页的视觉效果。这些...

    弹出窗口介绍

    // 当点击其他地方时关闭弹窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }; // 触发弹窗显示 function showPopup() { modal.style.display = "block...

    web前端练习10----写一个弹出框效果

    // 监听窗口点击事件,除了弹出框外的任何地方点击都隐藏弹出框 window.addEventListener("click", function (event) { if (event.target == popup) { hidePopup(); } }); // 可能触发弹出框显示的逻辑,比如...

    jQuery弹出层/jQuery弹出窗口/_全集

    4. **自定义事件和行为**:开发者可以根据需要为弹出层绑定自定义事件,例如在弹出层关闭时触发某个函数,或者在用户点击弹出层之外的地方自动关闭弹出层。 5. **插件应用**:jQuery生态系统中有许多现成的弹出层...

    jQuery显示弹出层

    如果用户点击了弹出层内的任何地方,而不只是关闭按钮,也需要关闭弹出层。同时,为了防止点击弹出层内容时触发其他可能的事件,可以使用`event.stopPropagation()`。 以上就是创建一个基本的jQuery弹出层的过程。...

    FullScreenHandler_Vc_howy96_

    你可以重写`OnNcHitTest`消息处理函数,确保鼠标点击任何地方都返回`HTCLIENT`,这样就不会触发系统菜单或最大化操作。 4. **处理窗口边缘拖动**:由于窗口没有了边框,需要自定义代码来允许用户通过窗口的边缘进行...

Global site tag (gtag.js) - Google Analytics