Permalink
Browse files

Removed scroll event for crappy fixed positioning. Overlay metrics no…

…t repeatedly recalculated.
  • Loading branch information...
1 parent 3913a8d commit ee476d9fa36c084706db7258403879e7df2dac9d @i-like-robots committed Apr 15, 2012
Showing with 37 additions and 35 deletions.
  1. +12 −6 css/example.css
  2. +0 −1 css/modal.css
  3. +3 −1 index.html
  4. +22 −27 js/modal.js
View
18 css/example.css
@@ -4,12 +4,17 @@
* Description: Some crummy styles to lay out the example file
*/
-body {
- line-height:1.5;
- font-family:Arial, sans-serif;
- color:#111;
- background:#eee;
+html, body {
+ height:100%;
+ margin:0;
+ padding:0;
}
+ body {
+ line-height:1.5;
+ font-family:Arial, sans-serif;
+ color:#111;
+ background:#eee;
+ }
h1 {
font-size:2em;
@@ -36,7 +41,8 @@ button {
#introduction {
width:25em;
- margin:5em auto;
+ margin:0 auto;
+ padding:5em 0 2em;
text-align:center;
}
View
1 css/modal.css
@@ -24,7 +24,6 @@
box-shadow:0 0 15px rgba(0, 0, 0, 0.25);
}
.modal-content {
- height:100%;
padding:2.5em 1em 1em;
}
.modal-close {
View
4 index.html
@@ -23,8 +23,10 @@
<h1>jQuery Modal</h1>
<p class="intro">
Every front-end developer needs their own <a href="http://github.com/i-like-robots/jQuery-Modal">modal
- window</a>. The plugin is highly optimised and customisable.
+ window</a>. The plugin is optimised and customisable with a neat feature: it supports multiple, nestable
+ instances.
</p>
+ <h2>Example</h2>
<p>
<button class="js-open" rel="example">Open the modal</button>
</p>
View
49 js/modal.js
@@ -1,22 +1,23 @@
/**
* @name Simple modal
* @author Matt Hinchliffe
- * @modified 13/04/2012
- * @version 0.6.7
+ * @modified 15/04/2012
+ * @version 0.7.0
* @requires jQuery 1.7+
* @description A simple modal overlay
- * @example
- * var $modal = $('body').modal().data('modal');
+ *
+ * jQuery plugin setup:
+ * var modal_instance = $('body').modal().data('modal');
*
* $.ajax({
* url: [url],
* success: function(data)
* {
- * $modal.open(data, callback);
+ * modal_instance.open(data, callback);
* }
* });
*
- * @example
+ * Generated markup:
* <div class="modal-wrapper">
* <div class="modal-content" />
* <span class="modal-close" data-toggle="modal">Close</span>
@@ -37,7 +38,7 @@
onupdate: undefined,
width: 640,
height: 480,
- fixed: true,
+ fixed: false,
overlay: true,
blur: true
}, options);
@@ -64,9 +65,11 @@
return;
}
+ this.doc = $(document);
+
// Build modal
this.wrapper = $('<div class="modal-wrapper"><span class="modal-close" data-toggle="modal">Close</span></div>').css({
- position: 'absolute',
+ position: this.opts.fixed ? 'fixed' : 'absolute',
width: this.opts.width,
height: this.opts.height
});
@@ -80,19 +83,15 @@
.css({
position: 'absolute',
top: 0,
- left: 0
+ left: 0,
+ width: '100%'
})
.appendTo( this.target );
}
- // Bind events and get dimensions from the window if attached to the body
- this.context = this.target === document.body ? $(window) : $( this.target ).css('position', 'relative');
-
- // Only fix the modal if attached to the body
- if (this.opts.fixed)
- {
- this.opts.fixed = $.isWindow(this.context[0]);
- }
+ // Context appropriate metrics and events
+ this.isBody = (this.target === document.body);
+ this.context = this.isBody ? $(window) : $( this.target ).css('position', 'relative');
this.isInitialized = true;
},
@@ -112,17 +111,13 @@
this.wrapper.css(
{
- top: height < maxHeight ? ( (maxHeight - height ) / 2) + top : top,
- left: width < maxWidth ? ( maxWidth - width ) / 2 : 0
+ top: height < maxHeight ? ( (maxHeight - height ) / 2 ) + top : top,
+ left: width < maxWidth ? (maxWidth - width) / 2 : 0
});
if (this.opts.overlay)
{
- this.overlay.css({
- top: top,
- width: maxWidth,
- height: maxHeight
- });
+ this.overlay.css('height', this.isBody ? this.doc.height() : maxHeight );
}
},
@@ -146,9 +141,9 @@
var self = this;
- if (this.opts.fixed)
+ if (this.isBody)
{
- this.context.on('resize.modal scroll.modal', function()
+ this.context.on('resize.modal', function()
{
self.align();
});
@@ -227,7 +222,7 @@
var self = this;
// Unbind events
- this.context.unbind('.modal');
+ this.context.off('.modal');
// Fade out
this.wrapper

0 comments on commit ee476d9

Please sign in to comment.