<commit_before>The Modal
=========

The goal of this jQuery plugin is to implement modal boxes.

If the box is modal then:

- Page itself should not be scrollable.
- Modal box content should be scrollable independent of the page.

Facebook and vk.com photo modals are working like that and I think
it's the right way to go.

Before describing features and API here's [the demo](http://rmcreative.ru/playground/modals_plugin/demo.html).

Features
--------

- No extra markup required.
- You can use it w/o markup at all by opening empty modal and filling it with
  custom data the way you want (see below).
- Optional close on ESC (enabled by default).

More to come.

Usage
-----

In order to use this plugin you need the following in the `head` section of your HTML:

```html
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.the-modal.js"></script>
<link rel="stylesheet" type="text/css" href="the-modal.css" media="all" />
```

### HTML-markup as modal content

HTML:

```html
<div class="modal" id="terms-of-service" style="display: none">
		<a href="#" class="close">×</a>

		Terms of service here
</div>
```

JavaScript:

```javascript
// attach close button handler
$('.modal .close').on('click', function(e){
	e.preventDefault();
	$.modal().close();
});

// open modal with default options or options set with init
// content will be taken from #login
$('#terms-of-service').modal().open();

// also we can open modal overriding some default options
$('#terms-of-service').modal().open({
	closeOnESC: false
});

// Close modal. There's no need to choose which one since only one can be opened
$.modal().close();
```

### Custom content

```javascript
$.modal().open({
	onOpen: function(el, options){
		el.html('Hello!');
	}
});
```

### AJAX-content

```javascript
$.modal().open({
	onOpen: function(el, options){
		$.get('http://example.com/', function(data){
			el.html(data);
		});
	}
});
```

### Overriding options

```javascript
// set option as default for all modals opened
$.modal({
	closeOnESC: true<commit_msg>Added docs for available options<commit_after>The Modal
=========

The goal of this jQuery plugin is to implement modal boxes.

If the box is modal then:

- Page itself should not be scrollable.
- Modal box content should be scrollable independent of the page.

Facebook and vk.com photo modals are working like that and I think
it's the right way to go.

Before describing features and API here's [the demo](http://rmcreative.ru/playground/modals_plugin/demo.html).

Features
--------

- No extra markup required.
- You can use it w/o markup at all by opening empty modal and filling it with
  custom data the way you want (see below).
- Optional close on ESC (enabled by default).

More to come.

Usage
-----

In order to use this plugin you need the following in the `head` section of your HTML:

```html
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.the-modal.js"></script>
<link rel="stylesheet" type="text/css" href="the-modal.css" media="all" />
```

### HTML-markup as modal content

HTML:

```html
<div class="modal" id="terms-of-service" style="display: none">
		<a href="#" class="close">×</a>

		Terms of service here
</div>
```

JavaScript:

```javascript
// attach close button handler
$('.modal .close').on('click', function(e){
	e.preventDefault();
	$.modal().close();
});

// open modal with default options or options set with init
// content will be taken from #login
$('#terms-of-service').modal().open();

// also we can open modal overriding some default options
$('#terms-of-service').modal().open({
	closeOnESC: false
});

// Close modal. There's no need to choose which one since only one can be opened
$.modal().close();
```

### Custom content

```javascript
$.modal().open({
	onOpen: function(el, options){
		el.html('Hello!');
	}
});
```

### AJAX-content

```javascript
$.modal().open({
	onOpen: function(el, options){
		$.get('http://example.com/', function(data){
			el.html(data);
		});
	}
});
```

### Available options (default values)

```javascript
$.modal({
	lockClass: 'themodal-lock', // css class of locked container(body)
	overlayClass: 'themodal-overlay', // css class of overlay

	closeOnEsc: true,	// close modal on press ESC
	closeOnOverlayClick: true,	// close overlay when clicked on it

	onBeforeClose: null,	// callback function(overlay, localOptions){}, called before modal close, must be return bool(if true - close, if false - prevent closing)
	onClose: null,	// callback function(overlay, localOptions){}, called after modal close
	onOpen: null,	// callback function(overlay, localOptions){}, called after modal open

	cloning: true	// clone modal dom element on open or toggle it's visibility
});
```

### Overriding options

```javascript
// set option as default for all modals opened
$.modal({
	closeOnESC: true
{'fraction_non_alphanumeric': 0.15673730507796882, 'fraction_numerical': 0.001599360255897641, 'mean_word_length': 4.110316649642493, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2415052', 'n_tokens_mistral': 1576, 'n_tokens_neox': 1497, 'n_words': 558}