jQuery Modaly

Default:

Modaly was built to be simple, I don't want a amazing modal, then let's use just a link and a container.
We create a link pointing to a anchor and this anchor will be a container.

<div id="modal">
  <input type="button" value="×" class="modaly__close" />
</div>

<a href="#modal">Show container $('#modal')</a>

$('a').modaly();

Close Button:

You can take off the close button.

$('a').modaly({ closeButton: false });

Close Overlay:

By default, when you click on overlay container, the modal closes. You can turn it off.

$('a').modaly({ closeOverlay: false });

Close Target:

You can choose which element will be your close button.
This element will be searched inside the modal container.

<div id="modal">
  <a href="#" class="close">x</a>
</div>

$('a').modaly({ closeTarget: '.close' });

Overlay:

Changes the overlay style of the #modaly__overlay.

$('a').modaly({ overlay: 1 });

Speed:

The speed that overlay and modal will be opened or closed.

$('a').modaly({ speed: 0 });

Top:

Distance between the top of window and the top of modal.

$('a').modaly({ top: 0 });

Block:

You can prevent the modal open for some reason, such as to check if the user is logged in and then open it manually.

$('a').modaly({ block: true }).on('click', function() {
  if (login) {
    $(this).modaly('open');
  } else {
    alert('You must login first!');
  }
});

Esc:

By default, when you press up the key esc, the modal is closed. You can disable it.

$('a').modaly({ esc: false })

Anchorless:

If you just want open the modal with no trigger via element like API, for example, you can bind the self modal:

$('.anchorless').modaly();

$('.anchorless').modaly('open');

Visible:

Maybe you want just make a visible element behave like a modal, so you do not need to hide, but let it visible.

<div id="modal">
<input type="button" value="×" class="modaly__close" />
</div>

<a href="#modal">Show container $('#modal')</a>

$('a').modaly();

Changing the settings globally:

You can change any option mentioning the scope $.fn.modaly.defaults. + option_name. It must be called before you bind the plugin.

$.fn.modaly.defaults.speed = 0;
$.fn.modaly.defaults.overlay = 1;

Options:

Functions:

$('a').modaly('open');

$('a').modaly('open', { key: 'value' });

$('a').modaly('close');

$('a').modaly('close', ['key']);

$('a').modaly('block', boolean);

Tests:

This plugin is tested to work better. Check it out!