twitter-bootstrap 超时后jquery模态自动显示

jquery modal show automatically after timeout

提问by user2680299

I'm using the bootstrap modal to show a log in or sign up modal and I want the modal to pop up after a certain amount of time, and I would like the modal to only close after they sign up or log in, basically it needs to restrict access to the site after it pop up, so they are forced to sign up or they cant continue viewing the site, i'm using bootstrap.js, I can trigger the modal from a link but I want it to automatically show up after like 30 seconds, please help, not to good with jquery, thanks.

我正在使用引导模式显示登录或注册模式，我希望模式在一定时间后弹出，我希望模式仅在他们注册或登录后关闭，基本上它需要在网站弹出后限制对网站的访问，因此他们被迫注册或无法继续查看网站，我正在使用 bootstrap.js，我可以从链接触发模式，但我希望它自动显示大约 30 秒后，请帮助，不适合 jquery，谢谢。

My modal

我的模态

<!-- Start modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 id="myModalLabel">Login member</h4>
    </div>
    <form class="form-horizontal marginbot-clear">  
        <div class="modal-body">
            <div class="control-group margintop30">
                <label class="control-label" for="inputEmail">Username</label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Username">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Login now</button>
        </div>
    </form>
</div>
<!-- End modal -->  

Modal jquery from bootstrap file below

下面的引导程序文件中的模态 jquery

!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

    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)

       that.enforceFocus()

         transition ?
            that.$element.one($.support.transition.end, function () {     that.$element.focus().trigger('shown') }) :
        that.$element.focus().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

    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 () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
      that.removeBackdrop()
      that.$element.trigger('hidden')
    })
  }

, removeBackdrop: function () {
    this.$backdrop && 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)

      this.$backdrop.click(
        this.options.backdrop == 'static' ?
          $.proxy(this.$element[0].focus, this.$element[0])
        : $.proxy(this.hide, this)
      )

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

      this.$backdrop.addClass('in')

      if (!callback) return

      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, callback) :
        callback()

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


 /* MODAL PLUGIN DEFINITION
 * ======================= */

var old = $.fn.modal

 $.fn.modal = function (option) {
  return this.each(function () {
    var $this = $(this)
    , data = $this.data('modal')
    , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object'     && option)
     if (!data) $this.data('modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option]()
  })
    }

 $.fn.modal.defaults = {
  backdrop: true
, keyboard: true
, show: true
 }

  $.fn.modal.Constructor = Modal


 /* MODAL NO CONFLICT
  * ================= */

  $.fn.modal.noConflict = function () {
$.fn.modal = old
return this
 }


 /* MODAL DATA-API
 * ============== */

 $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
  , href = $this.attr('href')
  , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, '')))    //strip for ie7
  , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href     }, $target.data(), $this.data())

e.preventDefault()

$target
  .modal(option)
  .one('hide', function () {
    $this.focus()
  })
 })

}(window.jQuery);

回答by Brian Phillips

You could try something like:

你可以尝试这样的事情：

$(document).ready(function() {
    setTimeout(function() {
      $('#myModal').fadeIn(200);
    }, 30000); // milliseconds
});

Beyond that, we'll need to see some code to get a better idea of your setup.

除此之外，我们还需要查看一些代码才能更好地了解您的设置。

You really don't needjQuery for this, though (although jQuery makes it easy to fade in/out). Pure JavaScript:

不过，您确实不需要jQuery（尽管 jQuery 可以轻松淡入/淡出）。纯 JavaScript：

window.onload = function() {
  var modal = document.getElementById('myModal');

  setTimeout(function() {
    modal.style.display = 'block';
  }, 30000);
}

Update

更新

Also, you can use bootstrap's built-in modal functions for showing/hiding. Simply make a new file such as custom.jsto hold a script like this:

此外，您可以使用 bootstrap 的内置模态函数来显示/隐藏。只需创建一个新文件，例如custom.js来保存这样的脚本：

$(document).ready(function() {
    setTimeout(function() {
      $('#myModal').modal('show');
    }, 30000); // milliseconds
});