Question

所有

如何在mouseover事件和onmouseout事件中隐藏和显示对话框（例如：像媒体播放器控件）

<div class="bar" style="padding:0px;" id="bar"></div>
<script>
bar = $(".bar", "#view").dialog({ 
             height: 30, 
             width: '100%',
             textAlign : "justify",  
             marginLeft : "auto",
             marginRight:"auto"
     })
</script>

感谢........

Answer 1

添加：

autoOpen: false,

鼠标悬停：

$(".bar", "#view").dialog('open')

关于mouseout：

$(".bar", "#view").dialog( 'close' )

http://jqueryui.com/demos/dialog/#method-close

Answer 2

找出你要鼠标悬停的内容并使用悬停：

  $('#myselect').hover(
        function()
        {
            $(".bar", "#view").dialog("open");
        },
        function()
        {
            $(".bar", "#view").dialog("close");

        }
    );

编辑：我再次看了你的问题，我正在做一个巨大的假设，你之前没有使用过对话框，所以这里有更多的信息：

假设您有一个想要进行对话的元素：

<div id="view">
    <div class="bar ui-dialog" style="padding:0px;" id="bar"></div>
</div>

假设您有另一个要鼠标悬停的元素来显示/隐藏该对话框：

<div id="myselect"></div>

您的对话框脚本只需要：

  $(document).ready(function()
    {
     $(".bar", "#view").dialog({
            autoOpen: false,
            height: 30,  
            width: '100%', 
            textAlign : "justify",   
            marginLeft : "auto", 
            marginRight:"auto" 
      });
  });

请注意添加的autoOpen: false;，使其最初关闭。

Answer 3

如果您希望它位于鼠标旁边，请创建对话框position:absolute和display:none。然后将鼠标悬停到任何元素

e.g。

$('#theElement').mouseover(e){function(){
  $("#dialog").css({"top":e.pageY,"left":e.pageX,"display":"block"});
});

e.pageY和e.pageX为您提供鼠标的位置。然后你可以玩这个，例如添加10来抵消它。

除了上面的css，你还需要让你的元素可见。然后添加一个mouseout事件，在该事件中，您只能使对话框不可见。

我更喜欢hover事件，它有2个函数调用，一个用于鼠标悬停，一个用于mouseout。

Answer 4

嗯，我猜，如果对话框被隐藏，你就不能“鼠标悬停”它并显示它。但是，要“手动”打开和关闭对话框，请使用open和close方法。

Answer 5

Ehm添加display：none，以设置attrbute。

隐藏对话框

5 个答案: