1

При закрытии всех модальных окон на сайте они снова сами открываются. Закрытие происходит либо через кнопку закрытия с data-dismiss="modal" либо по клику на оверлее. Причем, после того, как окно открывается после закрытия, не отображается оверлей, к body не добавляется класс modal-open и окно уже не закрыть кнопкой закрытия.

С чем это связано и куда копать? Ошибок в консоли нет. Глюк появился недавно, ничего нового не добавлялось.

P.S. modal.js v3.2.0

UPD:

/* Bootstrap: transition.js v3.1.1 */
+function(n){"use strict";function t(){var n=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var i in t)if(void 0!==n.style[i])return{end:t[i]};return!1}n.fn.emulateTransitionEnd=function(t){var i=!1,r=this;n(this).one("bsTransitionEnd",function(){i=!0});var e=function(){i||n(r).trigger(n.support.transition.end)};return setTimeout(e,t),this},n(function(){n.support.transition=t(),n.support.transition&&(n.event.special.bsTransitionEnd={bindType:n.support.transition.end,delegateType:n.support.transition.end,handle:function(t){return n(t.target).is(this)?t.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery);
/* Bootstrap modal */
+function(t){"use strict";function e(e,s){return this.each(function(){var i=t(this),n=i.data("bs.modal"),a=t.extend({},o.DEFAULTS,i.data(),"object"==typeof e&&e);n||i.data("bs.modal",n=new o(this,a)),"string"==typeof e?n[e](s):a.show&&n.show(s)})}var o=function(e,o){this.options=o,this.$body=t(document.body),this.$element=t(e),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};o.VERSION="3.2.0",o.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},o.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},o.prototype.show=function(e){var o=this,s=t.Event("show.bs.modal",{relatedTarget:e});this.$element.trigger(s),this.isShown||s.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.$body.addClass("modal-open"),this.setScrollbar(),this.escape(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',t.proxy(this.hide,this)),this.backdrop(function(){var s=t.support.transition&&o.$element.hasClass("fade");o.$element.parent().length||o.$element.appendTo(o.$body),o.$element.show().scrollTop(0),s&&o.$element[0].offsetWidth,o.$element.addClass("in").attr("aria-hidden",!1),o.enforceFocus();var i=t.Event("shown.bs.modal",{relatedTarget:e});s?o.$element.find(".modal-dialog").one("bsTransitionEnd",function(){o.$element.trigger("focus").trigger(i)}).emulateTransitionEnd(300):o.$element.trigger("focus").trigger(i)}))},o.prototype.hide=function(e){e&&e.preventDefault(),e=t.Event("hide.bs.modal"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.$body.removeClass("modal-open"),this.resetScrollbar(),this.escape(),t(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.bs.modal"),t.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",t.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},o.prototype.enforceFocus=function(){t(document).off("focusin.bs.modal").on("focusin.bs.modal",t.proxy(function(t){this.$element[0]===t.target||this.$element.has(t.target).length||this.$element.trigger("focus")},this))},o.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",t.proxy(function(t){27==t.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},o.prototype.hideModal=function(){var t=this;this.$element.hide(),this.backdrop(function(){t.$element.trigger("hidden.bs.modal")})},o.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},o.prototype.backdrop=function(e){var o=this,s=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=t.support.transition&&s;if(this.$backdrop=t('<div class="modal-backdrop '+s+'" />').appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",t.proxy(function(t){t.target===t.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!e)return;i?this.$backdrop.one("bsTransitionEnd",e).emulateTransitionEnd(150):e()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var n=function(){o.removeBackdrop(),e&&e()};t.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",n).emulateTransitionEnd(150):n()}else e&&e()},o.prototype.checkScrollbar=function(){document.body.clientWidth>=window.innerWidth||(this.scrollbarWidth=this.scrollbarWidth||this.measureScrollbar())},o.prototype.setScrollbar=function(){var t=parseInt(this.$body.css("padding-right")||0,10);this.scrollbarWidth&&this.$body.css("padding-right",t+this.scrollbarWidth)},o.prototype.resetScrollbar=function(){this.$body.css("padding-right","")},o.prototype.measureScrollbar=function(){var t=document.createElement("div");t.className="modal-scrollbar-measure",this.$body.append(t);var e=t.offsetWidth-t.clientWidth;return this.$body[0].removeChild(t),e};var s=t.fn.modal;t.fn.modal=e,t.fn.modal.Constructor=o,t.fn.modal.noConflict=function(){return t.fn.modal=s,this},t(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(o){var s=t(this),i=s.attr("href"),n=t(s.attr("data-target")||i&&i.replace(/.*(?=#[^\s]+$)/,"")),a=n.data("bs.modal")?"toggle":t.extend({remote:!/#/.test(i)&&i},n.data(),s.data());s.is("a")&&o.preventDefault(),n.one("show.bs.modal",function(t){t.isDefaultPrevented()||n.one("hidden.bs.modal",function(){s.is(":visible")&&s.trigger("focus")})}),e.call(n,a,this)})}(jQuery);
$(document).ready(function(){
	$('.open-callback').click(function(e) {
		e.preventDefault();
		var $modal = $('#modal-callback');
		$modal.modal('show');
	});
});
.modal-open {
	overflow: hidden;
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline:0;
}
.modal.fade .modal-dialog {
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	-webkit-transform: translate3d(0,-25%,0);
	-o-transform: translate3d(0,-25%,0);
	transform: translate3d(0,-25%,0);
}
.modal.in .modal-dialog {
	-webkit-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: scroll;
}
.modal-dialog {
	position: relative;
}
.modal-content {
	position: relative;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
}
.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity:0;
}
.modal-backdrop.in {
	filter: alpha(opacity=90);
	opacity: .9;
}
.modal-content .close {
	margin-top: -2px;
	padding: 0;
}
.modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}
#modal-callback .modal-dialog, #modal-result .modal-dialog {
	border: 5px solid #9a4f43;
	background-color: #ffffff;
	padding: 40px;
	text-align: center;
	width: 200px;
	margin: 20px auto;
}
.modal-content .close {
	position: absolute;
	right: 0;
	top: 0;
	color: #111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<button class="open-callback">кнопка</button>
<div class="modal fade" id="modal-callback" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close icon" data-dismiss="modal">X</button>
            <form>контент</form>
        </div>
    </div>
</div>

9
  • попробуй сделать рабочий пример воспроизводящий ошибку тут в сниппете, либо на jsfiddle.net, plnkr.co или любом другом подобном сервисе
    – Grundy
    Commented 20 июл. 2016 в 7:12
  • на jsfiddle все ок https://jsfiddle.net/vm46h9Lt/1/
    – zEvilz
    Commented 20 июл. 2016 в 7:41
  • значит надо смотреть чем отличается пример от того, что есть на самом деле и попытаться добавить недостающее. Кроме того - что за код был добавлен перед обработчиком клика? и почему не через external resources?
    – Grundy
    Commented 20 июл. 2016 в 7:43
  • на сайте тот же код. то, что выше - это код bootstrap modal
    – zEvilz
    Commented 20 июл. 2016 в 7:44
  • Один и тот же код не может работать по разному. Значит что-то отличается: начиная от браузера в котором пробовал, заканчивая кодом, который не вошел в пример. А так же версии используемых библиотек.
    – Grundy
    Commented 20 июл. 2016 в 7:46

1 ответ 1

1

Выяснил что беда в transition.js; удали его и будет тебе счастье =)

3
  • Уже выше в комментах писал, что при удалении его пропадает анимация (закрытия).
    – zEvilz
    Commented 21 июл. 2016 в 8:04
  • какая там анимация ? Commented 21 июл. 2016 в 8:28
  • вообще не понимаю зачем так изващаться, скачайте новый скрипт бутстрапа и юзайте его там нормальные робочие модалки... Commented 21 июл. 2016 в 8:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.