Skip to content

Added open/close custom events (not callbacks), README, LICENSE and bug fixes #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
leanModal.js is dual licensed under the MIT and GPL.

Copyright 2013 Finely Sliced and other contributors
http://leanmodal.finelysliced.com.au/

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

***********************************************************************

Copyright (C) 2013 Finely Sliced and other contributors
http://leanmodal.finelysliced.com.au/

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
3 changes: 0 additions & 3 deletions README

This file was deleted.

82 changes: 82 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# leanModal.js
A super simple JQuery plugin for modal windows. works with your CSS.

Built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn't apply any styles to the target element, other than for displaying and positioning.

## How To Use

### Step 1

Together with JQuery, include jquery.leanModal.min.js in your page, thusly:

```html
<script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script>
```

### Step 2

Rather than call another stylesheet, simply include the following overlay style block in your existing stylesheet. Additionally, be sure to hide your modal element with 'display: none;' (although that probably goes without saying).

```css
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
```

### Step 3

Call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element.

```javascript
$("#trigger_id").leanModal();
```

...or, if you want more than one modal window on the same page, simply add the 'rel' attribute to your triggers, and call the function by attribute, like so:

```javascript
$("a[rel*=leanModal]").leanModal();
```

## Options

In the spirit of keeping things simple, there are only ~~two~~ three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so:

```javascript
$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });
```

## Events

Additionally, there are two namespaced events available to bind event handlers to. An "open" and "close" event.

```javascript
$('#modal_id').on('open.leanModal', function(e) { alert('The modal is now open.') });
```

and...

```javascript
$('#modal_id').on('close.leanModal', function(e) { alert('The modal is now closed.') });
```

Simple, and sweet.

## Licensing
Available under the MIT and GPL licenses. See LICENSE file for more information.

## Change Log
- Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay.
- Oct 2013: v1.2 - added open/close events

## Author
@finelysliced

## Contributors
@mitzip
112 changes: 56 additions & 56 deletions jquery.leanModal.js
Original file line number Diff line number Diff line change
@@ -1,73 +1,73 @@
(function($){

$.fn.extend({

(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);


var overlay = $('<div id="lean_overlay"></div>');

if (!$("#lean_overlay").length) {
$("body").append(overlay);
}

options = $.extend(defaults, options);

return this.each(function() {

var o = options;

$(this).click(function(e) {

var modal_id = $(this).attr("href");
var modal_id = $(this).attr('href');

$("#lean_overlay").click(function() {
close_modal(modal_id);
});

$(o.closeButton).click(function() {
close_modal(modal_id);
$('#lean_overlay').click(function(e) {
close_modal(modal_id);
e.preventDefault();
});

$(o.closeButton).click(function(e) {
close_modal(modal_id);
e.preventDefault();
});

var modal_height = $(modal_id).outerHeight(false);
var modal_width = $(modal_id).outerWidth(false);

$('#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);

$(modal_id).trigger('open.leanModal');

e.preventDefault();
});

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){
function close_modal(modal_id) {
$('#lean_overlay').fadeOut(200);

$("#lean_overlay").fadeOut(200);
$(modal_id).css({
'display': 'none'
});

$(modal_id).css({ 'display' : 'none' });

}

$(modal_id).trigger('close.leanModal');
}
}
});

})(jQuery);
})(jQuery);