マウスホバリングで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

あなたのダイアログを行うDIVご覧ください。ダイアログが表示されます。あなたのコード全体がここにありますか？ –

@Danny H ..はい、コード全体がここにあります。 Dialog closeイベントは、Openイベント自体に書き込まれます。 –

ダイアログが表示されたらすぐに閉じる関数を呼び出します。あなたはこのように止めることはできません。あなたができることはタイマーでクローズを設定し、ホバー上でタイマーを止めて、マウスがダイアログを離れるときに再スタートすることです。

あなたが近いタイマー格納する変数が必要：ダイアログが構成された後

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

：1秒（1000ミリ秒）との密接なタイマーを起動し、ダイアログ構成で

var dialogCloseTimer = null;

をmouseenterイベントとmouseleaveイベントのリスナーを設定して、終了タイマーを停止して再開する：

出典

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>

そして今、あなたのマウスがその上になりますちょうど私が近くにトリガされ、ここで任意のコードを参照することはできません

出典

2016-04-27 14:21:44 Nicholas

マウスホバリングでJQueryダイアログを開いたままにする

答えて

関連する問題