我正在使用 jquery UI 创建一个 float 窗口。我能够创建窗口。但我很难让它漂浮。我希望窗口应该位于“主体”的右上角。 (现在你可以看到它在右边但在底部)我也想让它动起来。当我滚动页面时，窗口也应该随之滚动。例如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>
最佳答案
:) 所有这些答案都是处理您在技术上提出的问题的好方法......如何使用 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/
关于javascript - 如何在jquery中 float 模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11254432/