Modal

by satantx

HTML

<a href="" data-modal="modal" class="js-modal">Нажать</a>

<div id="modal" class="modal">
  <span>Показалось</span>
</div>

<div id="modal1" class="modal show-modal">
  <span>Показалось 123</span>
</div>

CSS

.modal {
  display: none;;
}

.modal.show-modal {
  display: block;
}

JavaScript

var doc = $(document),
	  body = $('body');

	(function (init_modal) {
		var documentWidth = parseInt(document.documentElement.clientWidth),
			 windowsWidth = parseInt(window.innerWidth),
			 scrollbarWidth = windowsWidth - documentWidth;
		body.append('<style>body.over {margin-right: '+scrollbarWidth+'px; overflow: hidden;}</style>');	 
	}());

	doc.on('click', '.js-modal', function () {
        login_close();
        var el = $(this).data('modal');
        show_modal(el)
        return false;
    });

    doc.on('click', '.js-close', function () {
        login_close();
        return false;
    });

function show_modal(name) {
	login_close();
	body.addClass('overlay-modal');
	$('#' + name).addClass('show-modal');
}

function login_close() {
    body.removeClass('overlay-modal');
    $('.show-modal').removeClass('show-modal');
}