如何优化这个弹出扩展jquery代码
我下面有这段代码 - 我想也许有一种方法可以使它更简洁？我不是专家程序员，因此感谢任何帮助和指示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
ph = $('#popup').height();
ot = $('#launcher').offset().top;
ats = function(){return ot - $(document).scrollTop();}
abs = function(){return ($(document).scrollTop() + $(window).height() ) - ot;}
popPos = function(){
var ret = {};
if (abs() <= ph) {
ret.top = ( ot - ( ph - $('#launcher').height() ) )
}
else {
ret.top = ot
}
ret.left = $('#launcher').offset().left;
return ret;
}
showPop = function(){
$('#popup')
.css(
{
'top' : popPos().top + 'px',
'left' : popPos().left + 'px'
}
)
.show()
;
}
$('body')
.click(
function(event){
if(event.target.id != 'launcher' ){
$('#popup')
.hide()
;
}
else {
if( $('#popup').is(':visible') ){
$('#popup')
.hide()
;
}
else {
showPop();
}
window.getSelection().empty();
}
}
)
;
});
</script>
<style type="text/css">
html, body, #container {
margin : 0px;
padding : 0px;
border : 0px;
width : 100%;
height : 100%;
}
.scroll {
margin : auto;
overflow-y : auto;
overflow-x : hidden;
}
.font {
size : 12px;
line-height : 14px;
color : #000;
text-align : left;
font-family : 'Arial', '_sans';
}
#launcher {
border : 1px solid #999;
width : 400px;
}
#popup {
position : absolute;
z-index : 2;
width : 200px;
height : 300px;
border : 1px solid #900;
padding : 0px;
margin : 0px;
background : #efefef;
display : none;
}
</style>
<body>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
<div id="launcher" class="x" style="margin-left:76px;">
launch
</div>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
<div id="popup" class="x">
popup
</div>
</body>
</html>
I have this code below - and am thinking maybe there is a way to make it more concise? I'm not an expert programmer so any help and pointers are appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
ph = $('#popup').height();
ot = $('#launcher').offset().top;
ats = function(){return ot - $(document).scrollTop();}
abs = function(){return ($(document).scrollTop() + $(window).height() ) - ot;}
popPos = function(){
var ret = {};
if (abs() <= ph) {
ret.top = ( ot - ( ph - $('#launcher').height() ) )
}
else {
ret.top = ot
}
ret.left = $('#launcher').offset().left;
return ret;
}
showPop = function(){
$('#popup')
.css(
{
'top' : popPos().top + 'px',
'left' : popPos().left + 'px'
}
)
.show()
;
}
$('body')
.click(
function(event){
if(event.target.id != 'launcher' ){
$('#popup')
.hide()
;
}
else {
if( $('#popup').is(':visible') ){
$('#popup')
.hide()
;
}
else {
showPop();
}
window.getSelection().empty();
}
}
)
;
});
</script>
<style type="text/css">
html, body, #container {
margin : 0px;
padding : 0px;
border : 0px;
width : 100%;
height : 100%;
}
.scroll {
margin : auto;
overflow-y : auto;
overflow-x : hidden;
}
.font {
size : 12px;
line-height : 14px;
color : #000;
text-align : left;
font-family : 'Arial', '_sans';
}
#launcher {
border : 1px solid #999;
width : 400px;
}
#popup {
position : absolute;
z-index : 2;
width : 200px;
height : 300px;
border : 1px solid #900;
padding : 0px;
margin : 0px;
background : #efefef;
display : none;
}
</style>
<body>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
<div id="launcher" class="x" style="margin-left:76px;">
launch
</div>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
dfg<br/><br/><br/><br/>dfg<br/><br/>dfg<br/><br/>
<div id="popup" class="x">
popup
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
清理代码的工作示例：
http://jsfiddle.net/mLPfd/
Working example of cleaned up code:
http://jsfiddle.net/mLPfd/
我的建议是在弹出窗口后面使用半透明层。这样，您可以在用户单击图层时关闭弹出窗口，而不是每次单击
body时都进行检查。其他一些明显的优势是：在此处查看演示：http://flowplayer.org/tools/demos/overlay/modal-dialog.html
另请注意，这个问题可能更适合：codereview.stackexchange.com
My tip is use a semi transparent layer behind the popup. That way you can close the popup when the user clicks on the layer instead of checking every time there is a click in the
body. Some other clear advantages are:See demo here: http://flowplayer.org/tools/demos/overlay/modal-dialog.html
Also note that this question maybe more suited to: codereview.stackexchange.com