隐藏对话框答案

【问题标题】：making a dialog hidden隐藏对话框
【发布时间】：2010-02-11 11:18:24
【问题描述】：

全部，

如何在 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>

谢谢…………

【问题讨论】：

标签： jquery jquery-ui dialog

【解决方案1】：

添加：

autoOpen: false,

鼠标悬停时：

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

鼠标移出时：

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

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

【讨论】：

【解决方案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;，它原本是关闭的。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

例如

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

e.pageY 和 e.pageX 给你鼠标的位置。然后，您可以使用它，例如添加 10 以稍微抵消它。

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

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

【讨论】：

【解决方案5】：

嗯，添加 display:none，样式属性。

【讨论】：