如何在 jquery 中浮动模态窗口

How to float a modal window in jquery

本文关键字：模态 窗口 jquery      更新时间：2023-09-26

我正在使用jquery UI创建一个浮动窗口。我能够创建窗口。但是我很难让它漂浮起来。我希望窗口应该在"正文"的右上角。（现在你可以在右边但底部看到它），我也想让它移动。当我滚动页面时，窗口也应该随之滚动。例如 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>
<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>

:)所有这些答案都是处理您在技术上提出的问题的好方法......如何使用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/

这

应该适用于您的 HTML，尽管您应该在 CSS 中增加 #footer 的高度（如 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
                        )
                )
            ]});
    });
});

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

请注意，有一些怪癖：

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

我希望这对您有所帮助：

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

相关文章：