Twitter-Bootstrap Modal on Modal 사용자 정의 닫기

Question

웹 응용 프로그램을위한 트위터 부트 스트랩 프레임 워크 사용. 하나의 모달을 다른 모달 위에 놓고 다른 모달을 호출하는 모달을 사용하고 있습니다. 현재 닫기 'x'버튼을 클릭하면 두 모달 창을 닫습니다. 나는 오직 최고 모달을 닫고 싶다.

Modal 클래스 정의는 bootstrap.js에서 750 행으로 시작됩니다.

모달 HTML

<div class="modal fade hide modal-creator" id="myModal_crop_image" style="display: none;height:600px;" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" data-target="#myModal_crop_image">×</button> 
     <h3>Create New Gallery</h3> 
    </div> 
    <div class="modal-body"> 
     <img style="height:50%;" src="<?php echo base_url(); ?>data/001/images/album/014.jpg" alt="" /> 
    </div><!-- /modal-body --> 

    <div class="modal-footer"> 

</div> 

스트랩 JS는

!function ($) { 

    "use strict"; // jshint ;_; 


/* MODAL CLASS DEFINITION 
    * ====================== */ 

    var Modal = function (element, options) { 
    this.options = options 
    this.$element = $(element) 
     .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) 
    this.options.remote && this.$element.find('.modal-body').load(this.options.remote) 
    } 

    Modal.prototype = { 

     constructor: Modal 

    , toggle: function() { 
     return this[!this.isShown ? 'show' : 'hide']() 
     } 

    , show: function() { 
     var that = this 
      , e = $.Event('show') 

     this.$element.trigger(e) 

     if (this.isShown || e.isDefaultPrevented()) return 

     $('body').addClass('modal-open') 

     this.isShown = true 

     this.escape() 

     this.backdrop(function() { 
      var transition = $.support.transition && that.$element.hasClass('fade') 

      if (!that.$element.parent().length) { 
      that.$element.appendTo(document.body) //don't move modals dom position 
      } 

      that.$element 
      .show() 

      if (transition) { 
      that.$element[0].offsetWidth // force reflow 
      } 

      that.$element 
      .addClass('in') 
      .attr('aria-hidden', false) 
      .focus() 

      that.enforceFocus() 

      transition ? 
      that.$element.one($.support.transition.end, function() { that.$element.trigger('shown') }) : 
      that.$element.trigger('shown') 

     }) 
     } 

    , hide: function (e) { 
     e && e.preventDefault() 

     var that = this 

     e = $.Event('hide') 

     this.$element.trigger(e) 

     if (!this.isShown || e.isDefaultPrevented()) return 

     this.isShown = false 

     $('body').removeClass('modal-open') 

     this.escape() 

     $(document).off('focusin.modal') 

     this.$element 
      .removeClass('in') 
      .attr('aria-hidden', true) 

     $.support.transition && this.$element.hasClass('fade') ? 
      this.hideWithTransition() : 
      this.hideModal() 
     } 

    , enforceFocus: function() { 
     var that = this 
     $(document).on('focusin.modal', function (e) { 
      if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { 
      that.$element.focus() 
      } 
     }) 
     } 

    , escape: function() { 
     var that = this 
     if (this.isShown && this.options.keyboard) { 
      this.$element.on('keyup.dismiss.modal', function (e) { 
      e.which == 27 && that.hide() 
      }) 
     } else if (!this.isShown) { 
      this.$element.off('keyup.dismiss.modal') 
     } 
     } 

    , hideWithTransition: function() { 
     var that = this 
      , timeout = setTimeout(function() { 
       that.$element.off($.support.transition.end) 
       that.hideModal() 
      }, 500) 

     this.$element.one($.support.transition.end, function() { 
      clearTimeout(timeout) 
      that.hideModal() 
     }) 
     } 

    , hideModal: function (that) { 
     this.$element 
      .hide() 
      .trigger('hidden') 

     this.backdrop() 
     } 

    , removeBackdrop: function() { 
     this.$backdrop.remove() 
     this.$backdrop = null 
     } 

    , backdrop: function (callback) { 
     var that = this 
      , animate = this.$element.hasClass('fade') ? 'fade' : '' 

     if (this.isShown && this.options.backdrop) { 
      var doAnimate = $.support.transition && animate 

      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') 
      .appendTo(document.body) 

      if (this.options.backdrop != 'static') { 
      this.$backdrop.click($.proxy(this.hide, this)) 
      } 

      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow 

      this.$backdrop.addClass('in') 

      doAnimate ? 
      this.$backdrop.one($.support.transition.end, callback) : 
      callback() 

     } else if (!this.isShown && this.$backdrop) { 
      this.$backdrop.removeClass('in') 

      $.support.transition && this.$element.hasClass('fade')? 
      this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) : 
      this.removeBackdrop() 

     } else if (callback) { 
      callback() 
     } 
     } 
    } 

여기에 JS에 대한 링크이다. http://jsfiddle.net/dazaweb/5cR95/

내가이 문제에 관해 어떤 생각을 갖고 있습니까?

당신이 data-dismiss="modal"이 모달 정의에서

Answer 1

, data-target="#theIdOfTheModal"이

이 내가이 보여주는 바이올린을 만들고 실제로 또는 데이터 목표없이 작동

만 가까운 특정 모달로 말할 것입니다 추가 : Fiddle!

Answer 2

추가 숨기기 방법 (최상위 라인)

e & e.stopPropogation(); 

,691 모달하기

이것은 부모와 나머지 아이들에게 사건을 버블 링시키는 것을 멈추게 할 것입니다.

또한 hide() (따라서 hide(e))의 이벤트 매개 변수를 이스케이프 메소드 내에 전달하십시오.

Answer 3

1. 취소 및 닫기 버튼에서 다음을 제거하십시오. data-dismiss = "modal";
2. 그런 다음 클래스를 추가하십시오 (예 : "close_modal";

자바 스크립트 : 자바 스크립트에서

은 다음과 같은 위임 기능을 만들

$(document).on('click', 'button:button.close_modal', function (event) { 
    event.preventDefault(); 
    var $this = $(event.currentTarget); 
    var modalId = $this.closest('div.modal').attr('id'); 
    $('#'+modalId+'').modal('hide'); 
});