模式自定义关闭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模态

回答

相关问题