Question

我想在母版页上显示通知，为此我正在使用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悬停，也会隐藏对话框。如果它徘徊，我想保持对话框打开。

Answer 1

显示对话框后立即调用close函数。你无法阻止这种方式。您可以做的是在计时器上设置关闭，在鼠标离开对话框时停止计时器并重新启动计时器。

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

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);
});

Answer 2

请参阅此示例

＆＃13;

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");
  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

现在当你的鼠标在那个div上时，只需进行对话

在鼠标悬停时保持JQuery对话框打开

2 个答案: