模式自定義關閉Twitter-Bootstrap模態

使用Twitter引導框架進行Web應用程序。我使用的是一種模態，我稱之爲另一種模態，在另一種模態上有一個模態。目前，如果您點擊關閉'x'按鈕，它將關閉兩個模式窗口。我只想關閉頂級模態。模式自定義關閉Twitter-Bootstrap模態

模態類定義從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/

關於我如何去做這件事的任何想法？

來源

2012-11-30 Bungdaddy

正如一個供參考，您的問題小提琴顯示它本來是更有益的比一個含有莫代爾JavaScript，這可能依賴於其他腳本的工作。 –

謝謝@JamesKleeh - 剛開始使用小提琴。不要感激幫助。 – Bungdaddy

在你有data-dismiss="modal"你的模式定義，添加data-target="#theIdOfTheModal"

這件事告訴

我創建了一個小提琴證明這一點，它實際上是有或沒有數據目標只能接近，具體模式： Fiddle!

來源

2012-11-30 19:44:01

更新了問題，並附上您的建議。仍然關閉這兩個模塊 – Bungdaddy

在您更新的文章中，您缺少數據目標中的＃符號 –

謝謝 - 仍然關閉我。請注意，當我點擊模態周圍的背景時，只有頂層模態關閉，離開原始模態。 – Bungdaddy

添加到模態隱藏方法（最上面的線）

e & e.stopPropogation();

這將停止冒泡事件給父母和其他孩子。

此外，傳遞事件參數hide()（以便它變成hide(e)）裏面的轉義方法。

來源

2013-10-07 20:01:38 leximus

在取消和關閉按鈕刪除這個：data-dismiss =「modal」;
然後添加一個類，例如：「close_modal」;
在javascript中創建一個委託類的函數如下：

的Javascript：

$(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'); 
});

來源

2014-01-10 12:55:33 user2236305

模式自定義關閉Twitter-Bootstrap模態

回答

相關問題