how to optimize this popup extension jquery code
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>
Working example of cleaned up code:
http://jsfiddle.net/mLPfd/
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
- You make sure the sure cant click somewhere else while the popup is active
- It looks good and centers the user attention in the popup
Also note that this question maybe more suited to: codereview.stackexchange.com
加载中,请稍侯......
精彩评论