javascript - jquery模态超时后自动显示

Question

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

我的模态

<!-- 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 -->  

来自下面 Bootstrap 文件的模态 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);

Answer 1

你可以尝试这样的事情:

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

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

不过，您确实不需要 jQuery(尽管 jQuery 可以轻松淡入/淡出)。纯 JavaScript:

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

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

更新

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

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