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.

Click here to open

Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

<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.

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

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

Close Overlay:

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

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

$('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.

Click here to open

yLab

x

You can find more jQuery plugins at http://wbotelhos.com/labs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

<div id="modal">
  <a href="#" class="close">x</a>
</div>
$('a').modaly({ closeTarget: '.close' });

Overlay:

Changes the overlay style of the #modal-overlay.

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

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

Speed:

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

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

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

Top:

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

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

$('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.

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

$('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.

Click here to open

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

$('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:

yLab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dui facilisis, congue justo sed, sodales mauris. Fusce sagittis metus a ex volutpat ultrices. Duis sit amet enim mauris. Suspendisse congue arcu libero, sed imperdiet enim suscipit eu. Vestibulum vestibulum, tortor a elementum consequat, turpis ante gravida lorem, eget euismod dui nisi in ante. Nunc id ipsum venenatis, rhoncus felis pretium, dictum tellus. Curabitur accumsan, lacus luctus volutpat dictum, ipsum purus efficitur sapien, sit amet blandit tellus mi sed nisl.

Nunc quis arcu turpis. Curabitur pretium, metus id mollis pretium, magna augue ultricies tellus, at scelerisque elit nisl nec ante. Vestibulum vestibulum risus pharetra ligula consequat, at scelerisque nisl vehicula. Fusce at vestibulum mi. Proin eu dapibus odio. Pellentesque ultricies non odio id facilisis. Duis ultricies mauris nulla, a accumsan nulla molestie at.

Donec finibus ullamcorper lorem. Quisque velit dolor, faucibus fringilla eros non, eleifend fringilla nunc. Phasellus pellentesque, nulla sed imperdiet semper, felis sem maximus tellus, id dictum libero velit eu odio. Nulla felis sem, ultrices vitae nibh vitae, facilisis porta leo. Duis in convallis tellus. In viverra molestie dolor, sit amet mattis neque. Suspendisse malesuada ex ex, id pharetra elit efficitur sed. Aliquam facilisis felis congue gravida venenatis.

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

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:

attribute: 'href'

Anchor attribute used to find the modal.

block: false

Prevents the modal to open.

closeButton: true

Show the close button.

closeOverlay: true

Enable close modal clicking on overlay.

closeTarget: '.modaly-close'

Hook of the close button.

esc: true

Enable the key esc to close the modal.

overlay: .5

Overlay applied on overlay.

prevent: true

Prevent or not the click action on binded element.

speed: 200

Speed to open and close the modal.

top: undefined

Distance between top of window and the modal.

Functions:

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

Open the modal.

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

Close the modal.

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

Block or unblock the modal.