As a newcomer to JQuery, I am working on implementing a pop-up box on my webpage.
Utilizing a jQuery plugin derived from Ray Stone's leanModal:
(function($) {
$.fn.extend({
leanModal: function(options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$(this).click(function(e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function() {
close_modal(modal_id)
});
$(o.closeButton).click(function() {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"left": 50 + "%",
"margin-left": -(modal_width / 2) + "px",
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
"display": "none"
})
}
}
})
})(jQuery);
The CSS associated with this setup is as follows:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#signup {
width: 404px;
padding-bottom: 2px;
display:none;
background: red;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
The initialization script used for this purpose is:
<script type="text/javascript">
$(function() {
$("#signup").leanModal();
});
</script>
And, here is the HTML structure being implemented:
<p id="examples" class="section box">
<strong>Example:</strong>
<a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a>
</p>
<div id="signup">
<div id="signup-ct">
<div id="signup-header">
<h2>This is a test</h2>
<p>testing.</p>
<a class="modal_close" href="#"></a>
</div>
</div>
</div>
Despite all of these components in place, I am facing difficulty getting the pop-up to display properly. Any suggestions or assistance would be greatly appreciated!