Fatal编程技术网
  • javascript/
  • Javascript 如何在jquery中浮动模式窗口

Javascript 如何在jquery中浮动模式窗口

javascript jquery jquery-ui

Javascript 如何在jquery中浮动模式窗口,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在使用jQueryUI创建一个浮动窗口。我能够创建窗口。但我很难让它漂浮起来。我希望窗口应该在“主体”的右上角。（现在你可以看到它在右边，但在底部）我还想让它移动。当我滚动页面时，窗口也应随之滚动。e、 g 这是我到目前为止所做的代码 请在上面查找代码 Javascript代码： $(document).ready(function(){ $("#dialog").dialog(); var $parent = $('#body'); var windowHeight = $(win

我正在使用jQueryUI创建一个浮动窗口。我能够创建窗口。但我很难让它漂浮起来。我希望窗口应该在“主体”的右上角。（现在你可以看到它在右边，但在底部）我还想让它移动。当我滚动页面时，窗口也应随之滚动。e、 g

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

请在上面查找代码

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

})

#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>
<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>
Html代码：

$(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' });

})

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


标题
内容顶部->向上滚动时，框应停止在此处（在文本正上方的行）
我在对话中
内容底部->向下滚动时，框应停止在此处（在文本右下方的行）
页脚
我希望这能帮助您：

这应该适用于您的HTML，尽管您应该在CSS中增加
#页脚的高度（如400px），以便能够确认它是否有效：


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


​
你可以在这里看到它：

请注意，这里有一些怪癖：


    

  • 对话框将粘贴到视口的右侧，此时它应粘贴到
    #主体的右侧。我错过了什么，还是因为
    dialog（）
    的限制
    • 

  • dlg_margin_bottom=$（“#footer”）。outerHeight（true）
    的值不足以完全满足您的底部蓝线要求
    #body
    的边距和边框尺寸当然应该添加。尽量简单，不要复杂
    • 

      ：）所有这些答案都是处理您技术性问题的好方法。。。如何使用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>

      

      
.myDialog{
填充物：5px10px；
背景：黄色；
边框：1px实心#999；
位置：固定；/*这是魔法-在滚动期间保持不变*/
顶部：0；右侧：0；/*这些坐标现在处于
与第一位家长的关系
非静态定位（车身）*/
}
.隐藏{
显示：无；
}
这是我的对话内容！
//现在你可以打开和关闭“隐藏”
//类以使对话框隐藏/显示。
$（'SomeButton'）。绑定（'click'，函数（ev）{
$（'.myDialog'）.toggleClass（'hidden'）；
});

      
同样的原理也可以应用到模式对话框中，使其随着页面的滚动而移动，诸如此类
      

      对于上面的一个工作示例，请看一下这个JSFIDLE:
      我为您创建了一个JSFIDLE-。您的示例有一个语法错误$框未定义。谢谢，实际上它应该是对话框窗口的高度而不是框。对话框浮动在整个文档之上，包括页眉和页脚之上。请参阅我的答案，了解仅在主体区域浮动的解决方案，根据需要排除页眉和页脚。最后但并非最不重要的一点：添加一些缓和功能将使对话框移动看起来更平滑。