javascript 如何在jquery中浮动模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11254432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to float a modal window in jquery
提问by Judy
I am using the jquery UI to create a floating window. I am able to create window. But I am having trouble in making it floating. I want that the window should be in top right corner of the "body". (now you can see its on right but at bottom) and I also want to make it moving. When I will scroll the page the window should also scroll along with it. e.g. http://manos.malihu.gr/tuts/jquery-floating-menu.html
我正在使用 jquery UI 创建一个浮动窗口。我能够创建窗口。但我无法让它漂浮。我希望窗口应该在“主体”的右上角。（现在您可以在右侧但在底部看到它），我也想让它移动。当我滚动页面时，窗口也应该随之滚动。例如http://manos.malihu.gr/tuts/jquery-floating-menu.html
Here is the code what I have done so far.
这是我到目前为止所做的代码。
Please find the code on http://jsfiddle.net/z8rW6/1/
请在http://jsfiddle.net/z8rW6/1/上找到代码
Javascript Code:
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 Code:
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 Code:
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>
回答by Troy Alford
:) All of these answers are great ways to handle the question you technically asked... how to do it with jQuery. However - it is far easier to do it with very simple CSS.
:) 所有这些答案都是处理您在技术上提出的问题的好方法……如何使用 jQuery 做到这一点。但是 - 使用非常简单的 CSS 来做到这一点要容易得多。
Example:
例子：
<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>
The exact same principles can be applied to your Modal dialog to make it move with the scrolling of the page, and that sort of thing.
完全相同的原则可以应用于您的模态对话框，使其随着页面的滚动而移动，诸如此类。
For a working example of the above, take a look at this jsFiddle: http://jsfiddle.net/WSZXL/
对于上述工作示例，请查看此 jsFiddle：http: //jsfiddle.net/WSZXL/
回答by Alain BECKER
This should work with your HTML, though you should increase #footer's height (like to 400px) in your CSS to be able to confirm that it works :
这应该适用于您的 HTML，但您应该#footer在 CSS 中增加的高度（如 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
)
)
]});
});
});
? You can see it live here : http://jsfiddle.net/5TFQy/10/
? 你可以在这里看到它：http: //jsfiddle.net/5TFQy/10/
Note that there are some quircks though:
请注意，虽然有一些怪癖：
- dialog sticks to the right of the viewport, when it should stick to the right of the
#body. Did I miss something, or is it a limitation ofdialog()? dlg_margin_bottom = $("#footer").outerHeight(true)isn't enough of a value to pixel-perfectly honour your bottom-blue-line requirement.#body's margin and border sizes should certainly be added. Tried to keep itsimplenot to complicated.
- 对话框粘在视口的右侧，而它应该粘在
#body. 我错过了什么，还是它的限制dialog()？ dlg_margin_bottom = $("#footer").outerHeight(true)不足以让像素完美地满足您的底线蓝线要求。#body的边距和边框大小当然应该添加。试图保留它简单的不要复杂。
