jquery modal show automatically after timeout

Question

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

Answer 1

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