javascript - jquery modal show automatically after timeout

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.

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

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

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

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

Share Improve this question edited Nov 15, 2013 at 17:14 Taryn 248k57 gold badges370 silver badges408 bronze badges asked Aug 30, 2013 at 19:25 user2680299 792 gold badges2 silver badges9 bronze badges

Be aware that a modal is not necessarily going to prevent someone from viewing your content. Anyone who knows how to use a DOM inspector can simply hide the modal. If you really want to lock it down, rely on your backend code to do it. – ponysmith Commented Aug 30, 2013 at 20:00

Add a ment |

1 Answer 1

Sorted by: Reset to default 12

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 need jQuery for this, though (although jQuery makes it easy to fade in/out). Pure 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.js to hold a script like this:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jquery modal show automatically after timeout - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)