javascript - 如何在jquery中浮动模态窗口

Question

我正在使用 jquery UI 创建一个浮动窗口。我能够创建窗口。但我无法让它漂浮。我希望窗口应该在“body”的右上角。（现在你可以看到它在右边但在底部）我也想让它移动。当我滚动页面时，窗口也应该随之滚动。例如http://manos.malihu.gr/tuts/jquery-floating-menu.html

这是我到目前为止所做的代码。

请在http://jsfiddle.net/z8rW6/1/上找到代码

Javascript代码：

$(document).ready(function(){


$("#dialog").dialog();


var $parent = $('#body');
var windowHeight = $(window).height();
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $( ".selector" ).dialog( "option", "height" );
$('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({
       my: 'right top',
       at: 'right top',
       of: $('#body')
    });

$(window).scroll(function(event) {
    var windowBottom = $(window).scrollTop() + windowHeight;

if (windowBottom < topStop)

    $('.selector').dialog({ dialogClass: 'myPosition1' });
else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
    $('.selector').dialog({ dialogClass: 'myPosition2' });
else
    $('.selector').dialog({ dialogClass: 'myPosition3' });

})

CSS 代码：

#page{
    width:800px;
    margin:0 auto;
}
.myPosition1 {
position: 'absolute',
            top: '0px',
            bottom: 'auto',
            Right: '0'

}
.myPosition2 {
           position: 'fixed',
            top: 'auto',
            bottom: 'auto',
            Right: '0'
        }
 .myPosition3 {
         position: 'absolute',
        top: 'auto',
        bottom: '0px',
        Right: '0'
        }
#header{
    border:1px solid blue;
    height:15px;
    margin:8px;
}
#body{
    border:1px solid blue;
    height:5600px;
    margin:8px;
    position: relative;
}
#footer{
    border:1px solid blue;
    height:15px;
    margin:8px;
}
h1,h2{
    padding:16px;
}

#debug {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 100px;
    width: 100px;
    color: red;
}

html代码：

<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>

</head>
<body style="font-size:62.5%;">
<div id="page">
 <div id="header"><h1>header</h1></div> 
    <div id="body" >
        <h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>
        <div id="dialog" title="Detailed FeedBack">I'm in a dialog </div>

        <span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>

    </div>
    <div id="footer"><h1>footer</h1></div>
    <div id="debug"></div>
</div>
</body>
</html>

score 5 · Accepted Answer

:) 所有这些答案都是处理您在技术上提出的问题的好方法......如何使用 jQuery 来解决。但是 - 使用非常简单的 CSS 更容易做到这一点。

例子：

<head>
 <style type="text/css">
     .myDialog {
         padding: 5px 10px;
         background: yellow;
         border: 1px solid #999;

         position: fixed;  /* This is the magic - stays during scroll. */
         top: 0; right: 0; /* These coordinates are now in 
                              relation to the first parent
                              with non-static positioning (body) */
     }
     .hidden {
         display: none;
     }
 </style>
</head>
<body>
 <!-- The rest of your page -->

 <!-- Put your dialog at the end of the body (or the beginning) 
      This way you don't have to worry about it getting hung up 
      within the positioning boxes of any other elements -->

 <div class="myDialog hidden">
  This is my dialog content!
 </div>
</body>

<script type="text/javascript" language="javascript">
    // Now you can just toggle on and off the "hidden"
    // class to make the dialog hide/show.

    $('#SomeButton').bind('click', function (ev) {
        $('.myDialog').toggleClass('hidden');
    });
</script>

完全相同的原则可以应用于您的模态对话框，使其随着页面的滚动而移动，诸如此类。

对于上面的一个工作示例，看看这个 jsFiddle：http: //jsfiddle.net/WSZXL/

score 4 · Accepted Answer

这应该适用于您的 HTML，但您应该增加#footerCSS 中的高度（例如 400 像素）才能确认它是否有效：

var $d;
$(document).ready(function(){    
    var dlg_width = 300;
    var dlg_height = 200;
    var dlg_offset_x = $("#page").width() - dlg_width + 100;
    var dlg_margin_top = $("#header").outerHeight(true); // includeMargins=true
    var dlg_margin_bottom = $("#footer").outerHeight(true); // includeMargins=true

    $d = $('#dialog').dialog({
        width: dlg_width,
        height: dlg_height,
        position: [dlg_offset_x, dlg_margin_top]
    });

    $(window).bind('scroll', function(evt){
        var scrollTop = $(window).scrollTop();
        var bottom = $(document).height() - scrollTop;
            $d.dialog("option", {"position": [
                dlg_offset_x,
                ((dlg_margin_top - scrollTop > 0) ?
                    dlg_margin_top - scrollTop :
                        ((bottom - dlg_height > dlg_margin_bottom) ?
                            0 :
                            bottom - dlg_height - dlg_margin_bottom
                        )
                )
            ]});
    });
});

你可以在这里看到它：http: //jsfiddle.net/5TFQy/10/

请注意，虽然有一些怪癖：

对话框粘在视口的右侧，而它应该粘在#body. 我错过了什么，还是它的限制dialog()？
dlg_margin_bottom = $("#footer").outerHeight(true)不足以完全满足您的底线要求。#body的边距和边框大小当然应该添加。试图保留它~~简单的~~不要复杂。

score 2 · Accepted Answer

2

我希望这能帮到您：

http://jsfiddle.net/lytican/UxZKH/2/

于 2012-06-29T12:36:24.807 回答

javascript - 如何在jquery中浮动模态窗口

3 回答 3

Related

Reference