How to create a Custom Popup

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js

jQuery(document).ready(function(){
jQuery(‘#loan-popup’).show();
jQuery(‘body’).append(‘

‘);

jQuery(‘#loan-popup .close-popup, .trans’).click(function(){
jQuery(‘#loan-popup’).hide();
jQuery(‘body .trans’).remove();
});

jQuery(document).keydown(function(e) {
if (e.keyCode == 27) {
jQuery(‘#loan-popup’).hide();
jQuery(‘body .trans’).remove();
}
});

});

<style>
#loan-popup{ background: #f0f0f0 none repeat scroll 0 0;
display: none;
left: 50%;
margin-left: -150px;
margin-top: -50px;
min-height: 100px;
padding: 10px;
position: fixed;
top: 50%;
width: 300px;
z-index: 2147483647;
}
#loan-popup .close {
position: absolute;
right: 0;
top: -8px;
}
.trans {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 99999;
}
#loan-popup .close-popup{
background: rgba(0, 0, 0, 0) url(“https://cdn1.iconfinder.com/data/icons/browser-ui-elements/154/close-16.png&#8221;) repeat scroll right top / 16px 16px;
height: 16px;
position: absolute;
right: -5px;
top: -6px;
width: 16px;
z-index: 2147483647;
cursor:pointer;
}
</style>
</head>

<body>

I know this isn’t the complete answer, but I assume you can work the

</div>
</body>
</html>

Advertisements