Skip to content

Commit

Permalink
experimenting with fade in/out. Not super clean, but works...
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylefox
kylefox committed Aug 14, 2013
1 parent 2f7292b commit 15a00ca
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 37 deletions.
89 changes: 57 additions & 32 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<script src="http:https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>

<script src="../jquery.modal.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../jquery.modal.css" type="text/css" media="screen" />

<script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
<link rel="stylesheet" href="highlight/github.css" type="text/css" media="screen" />
Expand All @@ -24,15 +24,15 @@
table {width:100%;border-collapse:collapse;}
td { border: 1px solid #eee; padding: 15px; }
td pre { margin: 0; }

/* Example 2 (login form) */
.login_form.modal {
border-radius: 0;
line-height: 18px;
padding: 0;
font-family: "Lucida Grande", Verdana, sans-serif;
}

.login_form h3 {
margin: 0;
padding: 10px;
Expand All @@ -41,9 +41,9 @@
background: -moz-linear-gradient(top, #2e5764, #1e3d47);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
}

.login_form.modal p { padding: 20px 30px; border-bottom: 1px solid #ddd; margin: 0;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));
overflow: hidden;
}
.login_form.modal p:last-child { border: none; }
Expand All @@ -55,17 +55,17 @@
border: 1px solid #ddd;
width: 200px;
}


.part {
display: none;
}

</style>
<title>jQuery Modal</title>
</head>
</head>
<body>

<h1>jQuery Modal</h1>
<p><em>the simplest modal you ever did see.</em> &ndash; <a href="http:https://github.com/kylefox/jquery-modal">Code on GitHub &raquo;</a></p>
<ul>
Expand All @@ -80,13 +80,13 @@ <h1>jQuery Modal</h1>




<hr />

<h2>Example 1: Open &amp; Close with links</h2>
<ol>
<li>Embed modal HTML in document <small>(and hide it)</small></li>
<li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li>
<li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li>
</ol>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
Expand Down Expand Up @@ -116,8 +116,8 @@ <h2>Example 1: Open &amp; Close with links</h2>
<div class="modal" id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. <br />Click <a href="#" rel="modal:close">close</a>, click the overlay, or press ESC</p>
</div>


<hr />

<h2>Example 2: styled login form &amp; events</h2>
Expand Down Expand Up @@ -160,24 +160,24 @@ <h2>Example 4: AJAX</h2>
$(html).appendTo('body').modal();
});
});</code></pre>

<pre><code>&lt;!-- AJAX response must be wrapped in the modal's root class. --&gt;<br/>&lt;div class=&quot;modal&quot;&gt;<br/> &lt;p&gt;Second AJAX Example!&lt;/p&gt;<br/>&lt;/div&gt;</pre></code>
<p>If you want more spinner styles, check out <a href="http:https://ajaxload.info/">ajaxload.info</a>.</p>

<p>If you want more spinner styles, check out <a href="http:https://ajaxload.info/">ajaxload.info</a>.</p>

<hr />

<h2>Example 5: the un-closable window</h2>
<p>
This <a href="#ex5">example</a> demonstrates how to disable the default methods of closing the modal:

<pre><code> $("#sticky").modal({
escapeClose: false,
clickClose: false,
showClose: false
});</code></pre>


</p>
<div id="ex5" class="modal">
<p>If you do this, be sure to provide the user with an alternate method of <a href="#" rel="modal:close">closing the window.</a></p>
Expand All @@ -201,14 +201,32 @@ <h2>Example 6: Multiple Modals</h2>
<p>I'm the third modal. You get the idea.</p>
</div>

<hr />

<h2>Example 7: Fading</h2>

<p>This <a href="#ex7">example</a> shows how you can do a simple fade by specifying the <code>fadeDuration</code> option.</p>

<pre><code> $("#fade").modal({
fadeDuration: 100
});</code></pre>

<div id="ex7" class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script type="text/javascript" charset="utf-8">
$(function() {

function log_modal_event(event, modal) {
if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
};

$(document).on($.modal.BEFORE_BLOCK, log_modal_event);
$(document).on($.modal.BLOCK, log_modal_event);
$(document).on($.modal.BEFORE_OPEN, log_modal_event);
Expand All @@ -218,20 +236,20 @@ <h2>Example 6: Multiple Modals</h2>
$(document).on($.modal.AJAX_SEND, log_modal_event);
$(document).on($.modal.AJAX_SUCCESS, log_modal_event);
$(document).on($.modal.AJAX_COMPLETE, log_modal_event);

$('#more').click(function() {
$(this).parent().after($(this).parent().next().clone());
$.modal.resize();
return false;
});

$('#manual-ajax').click(function(event) {
event.preventDefault();
$.get(this.href, function(html) {
$(html).appendTo('body').modal();
});
});

$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
Expand All @@ -240,8 +258,15 @@ <h2>Example 6: Multiple Modals</h2>
showClose: false
});
});


$('a[href="#ex7"]').click(function(event) {
event.preventDefault();
$(this).modal({
fadeDuration: 1000
});
});

});
</script>
</body>
</body>
</html>
34 changes: 29 additions & 5 deletions jquery.modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
var remove, target;
this.$body = $('body');
this.options = $.extend({}, $.modal.defaults, options);
this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
if (el.is('a')) {
target = el.attr('href');
//Select element by id from href
Expand Down Expand Up @@ -65,21 +66,32 @@
},

block: function() {
var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
this.blocker = $('<div class="jquery-modal blocker"></div>').css({
top: 0, right: 0, bottom: 0, left: 0,
width: "100%", height: "100%",
position: "fixed",
zIndex: this.options.zIndex,
background: this.options.overlay,
opacity: this.options.opacity
opacity: initialOpacity
});
console.log(initialOpacity);
this.$body.append(this.blocker);
if(this.options.doFade) {
this.blocker.animate({opacity: this.options.opacity}, this.options.doFade);
}
this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
},

unblock: function() {
this.blocker.remove();
if(this.options.doFade) {
this.blocker.fadeOut(this.options.fadeDuration, function() {
this.remove();
});
} else {
this.blocker.remove();
}
},

show: function() {
Expand All @@ -90,13 +102,24 @@
}
this.$elm.addClass(this.options.modalClass + ' current');
this.center();
this.$elm.show().trigger($.modal.OPEN, [this._ctx()]);
if(this.options.doFade) {
this.$elm.fadeIn(this.options.fadeDuration);
} else {
this.$elm.show();
}
this.$elm.trigger($.modal.OPEN, [this._ctx()]);
},

hide: function() {
this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
if (this.closeButton) this.closeButton.remove();
this.$elm.removeClass('current').hide();
this.$elm.removeClass('current')

if(this.options.doFade) {
this.$elm.fadeOut(this.options.fadeDuration);
} else {
this.$elm.hide();
}
this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
},

Expand Down Expand Up @@ -156,7 +179,8 @@
modalClass: "modal",
spinnerHtml: null,
showSpinner: true,
showClose: true
showClose: true,
fadeDuration: null
};

// Event constants
Expand Down

0 comments on commit 15a00ca

Please sign in to comment.