保持JQuery对话框在鼠标悬停状态下打开

我想在母版页上显示通知，并且我正在使用JQuery对话框。我可以使用下面的代码实现自动显示和隐藏页面加载。但是如果鼠标悬停在对话框上，我想保持对话框打开状态。保持JQuery对话框在鼠标悬停状态下打开

$(document).ready(function() { 

    $("#dialog").dialog({ 
     autoOpen: false, 
     draggable: false, 
     resizable: false, 
     height: 100, 
     hide: { 
      effect: 'fade', 
      duration: 2000 
     }, 
     open: function() { 
      $(this).dialog('close'); 
     }, 
     close: function(){ 
      // $(this).dialog('destroy'); 
     }, 
     show: { 
      effect: 'fade', 
      duration: 2000 
     } 
    }); 

    var x = $("#<%= imgNotifcation.ClientID %>").position().left + $("#<%= imgNotifcation.ClientID %>").outerWidth(); 
    var y = $("#<%= imgNotifcation.ClientID %>").position().top - jQuery(document).scrollTop(); 

    // var x = 0; 

    $("#dialog").dialog("open"); 
    $('#dialog').dialog('option', 'position', [x-90, y+25]); 

});

这工作正常，但它隐藏对话框，即使我把div #dialog悬停。我想保持对话框打开，如果它徘徊。

来源

2016-04-27 Bharat Sisode

我不能在这里看不到任何代码被触发时关闭你悬停在对话框中。你确定你的代码全部在这里吗？ –

@Danny H ..是的整个代码都在这里。对话关闭事件本身写入打开事件。 –

显示对话框后，您立即调用关闭功能。你不能以这种方式来阻止。你可以做的是设置关闭的定时器，停止计时器悬停和重新启动，当鼠标离开对话框。

你需要一个变量来存储关闭计时器：

var dialogCloseTimer = null;

在对话框配置，具有1秒（1000毫秒）启动关闭计时器：

open: function() { 
    var self = this; 
    dialogCloseTimer = window.setTimeout(function() { 
     $(self).dialog('close'); 
    }, 1000); 
},

被配置对话框之后，设置收听者为mouseenter和mouseleave事件以停止并重新启动关闭计时器：

$("#dialog").on("mouseenter", function() { 
    window.clearTimeout(dialogCloseTimer); 
}).on("mouseleave", function() { 
    var self = this; 
    dialogCloseTimer = window.setTimeout(function() { 
     $(self).dialog('close'); 
    }, 1000); 
});

来源

2016-04-27 13:57:25 aorcsik

这就是我一直在寻找的..非常感谢.. :-) –

请参阅本例中

var i = 0; 
 
$(".overout") 
 
    .mouseover(function() { 
 
    i += 1; 
 
    $(this).find("span").text("mouse over x " + i); 
 
    }) 
 
    .mouseout(function() { 
 
    $(this).find("span").text("mouse out "); 
 
    }); 
 

 
var n = 0; 
 
$(".enterleave") 
 
    .mouseenter(function() { 
 
    n += 1; 
 
    $(this).find("span").text("mouse enter x " + n); 
 
    }) 
 
    .mouseleave(function() { 
 
    $(this).find("span").text("mouse leave"); 
 
    });

.out { 
 
    width: 40%; 
 
    height: 120px; 
 
    margin: 0 15px; 
 
    background-color: #d6edfc; 
 
    float: left; 
 
} 
 

 
.in { 
 
    width: 60%; 
 
    height: 60%; 
 
    background-color: #fc0; 
 
    margin: 10px auto; 
 
} 
 

 
p { 
 
    line-height: 1em; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="out overout"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 
    <div class="out enterleave"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 

 
</body>

现在当你的鼠标将在该div只是做你的对话框

来源

2016-04-27 14:21:44 Nicholas

保持JQuery对话框在鼠标悬停状态下打开

回答

相关问题