加载popup onload？

Question

单击时，下面的脚本应显示如下模式对话框：http://codepen.io/dfitzy/pen/yeoeGO如何在页面加载时显示弹出窗口，而不是单击按钮时？我尝试使用onload但没有发生任何事情。有什么想法吗？

(function(){
 var $content = $('.modal_info').detach();

 $('.open_button').on('click', function(e){
 modal.open({
   content: $content,
   width: 540,
   height: 270,
 });
 $content.addClass('modal_content');
 $('.modal, .modal_overlay').addClass('display');
 $('.open_button').addClass('load');
  });
 }());

 var modal = (function(){

 var $close = $('<button role="button" class="modal_close" title="Close"><span></span></button>');
 var $content = $('<div class="modal_content"/>');
 var $modal = $('<div class="modal"/>');
 var $window = $(window);

 $modal.append($content, $close);

 $close.on('click', function(e){
 $('.modal, .modal_overlay').addClass('conceal');
 $('.modal, .modal_overlay').removeClass('display');
 $('.open_button').removeClass('load');
 e.preventDefault();
 modal.close();
});

return {
  center: function(){
    var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;
    var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;
    $modal.css({
      top: top + $window.scrollTop(),
      left: left + $window.scrollLeft(),
  });
},
open: function(settings){
  $content.empty().append(settings.content);

  $modal.css({
    width: settings.width || 'auto',
    height: settings.height || 'auto'
  }).appendTo('body');

  modal.center();
  $(window).on('resize', modal.center);
},
close: function(){
  $content.empty();
  $modal.detach();
  $(window).off('resize', modal.center);
}
};
}());
</script>

Answer 1

我认为这就是你需要的

$(document).ready(function() { 

  $(".modal").dialog({
        title: "Dialog Popup",
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    /* method calling requires . or [] bracket notation */
    }).dialog('open');
}

以下是引用Link

Answer 2

这是一个肮脏的黑客，但如果你想打开弹出窗口保持附加点击。您可以执行以下操作：

<div>
    something
  </div>
</div> <!-- note: 2 closing divs, only 1 opening -->

否则，Amey Deshpande建议的是正确的做法。

Answer 3

它应该有用，

试试这个

$(document).ready(function (e){代替$('.open_button').on('click', function(e){

Answer 4

$(document).ready()应该有效。您可能在控制台cannot read property open of undefined中收到错误。

您可以尝试这样的事情：

var modal = (function() {
  var $close = $('<button role="button" class="modal_close" title="Close"><span></span></button>');
  var $content = $('<div class="modal_content"/>');
  var $modal = $('<div class="modal"/>');
  var $window = $(window);

  $modal.append($content, $close);

  $close.on('click', function(e) {
    $('.modal, .modal_overlay').addClass('conceal');
    $('.modal, .modal_overlay').removeClass('display');
    $('.open_button').removeClass('load');
    e.preventDefault();
    modal.close();
  });

  return {
    center: function() {
      var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;
      var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;
      $modal.css({
        top: top + $window.scrollTop(),
        left: left + $window.scrollLeft(),
      });
    },
    open: function(settings) {
      $content.empty().append(settings.content);

      $modal.css({
        width: settings.width || 'auto',
        height: settings.height || 'auto'
      }).appendTo('body');

      modal.center();
      $(window).on('resize', modal.center);
    },
    close: function() {
      $content.empty();
      $modal.detach();
      $(window).off('resize', modal.center);
    }
  };
})();

var $content = $('.modal_info').detach();
$(document).ready(function() {
  modal.open({
    content: $content,
    width: 540,
    height: 270,
  });
  $content.addClass('modal_content');
  $('.modal, .modal_overlay').addClass('display');
  $('.open_button').addClass('load');
});

@import url(https://fonts.googleapis.com/css?family=Palanquin:700);
 html,
body {
  background: #C7E5E6;
  font-family: 'Helvetica', Arial, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
h1 {
  color: #A6A49C;
  font-family: 'Palanquin', Arial, sans-serif;
}
p {
  color: #474544;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14px;
}
.modal {
  opacity: 0;
  padding: 50px;
  position: absolute;
  z-index: 1100;
  -webkit-transition: opacity 600ms linear 600ms;
  -moz-transition: opacity 600ms linear 600ms;
  -ms-transition: opacity 600ms linear 600ms;
  -o-transition: opacity 600ms linear 600ms;
  transition: opacity 600ms linear 600ms;
}
.modal_info {
  background: #FCF9F2;
  padding: 50px 100px;
  text-align: center;
}
.modal_overlay {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 900;
  -webkit-transition: opacity 200ms linear;
  -moz-transition: opacity 200ms linear;
  -ms-transition: opacity 200ms linear;
  -o-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.display {
  opacity: 1;
  visibility: visible;
}
.conceal {
  visibility: visible;
}
.btn_container {
  height: 100%;
  text-align: center;
}
.btn_container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}
.open_button {
  background: #363D4E;
  display: inline-block;
  height: 66px;
  position: relative;
  vertical-align: middle;
  whitespace: normal;
  width: 172px;
  z-index: 1000;
  -webkit-transition: opacity 100ms linear;
  -moz-transition: opacity 100ms linear;
  -ms-transition: opacity 100ms linear;
  -o-transition: opacity 100ms linear;
  transition: opacity 100ms linear;
}
a.open_button {
  color: #FFFFFF;
  letter-spacing: 2px;
  line-height: 66px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
a.open_button:hover {
  background: #3E465A;
}
a.open_button.load {
  opacity: 0;
}
button.modal_close {
  background: #363D4E;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  outline: none;
  width: 52px;
  height: 52px;
  position: absolute;
  right: 30px;
  top: 30px;
  -webkit-transition: -webkit-transform 600ms;
  -moz-transition: -moz-transform 600ms;
  -ms-transition: -ms-transform 600ms;
  -o-transition: -o-transform 600ms;
  transition: transform 600ms;
}
button.modal_close:hover {
  background: #3E465A;
  -webkit-transform: rotate(360deg) scale(1.10);
  -moz-transform: rotate(360deg) scale(1.10);
  -ms-transform: rotate(360deg) scale(1.10);
  -o-transform: rotate(360deg) scale(1.10);
  transform: rotate(360deg) scale(1.10);
  -webkit-transition: -webkit-transform 600ms;
  -moz-transition: -moz-transform 600ms;
  -ms-transition: -ms-transform 600ms;
  -o-transition: -o-transform 600ms;
  transition: transform 600ms;
}
button.modal_close span,
span:before,
span:after {
  background: #FFFFFF;
  content: '';
  cursor: pointer;
  display: block;
  height: 2px;
  position: absolute;
  width: 20px;
}
button.modal_close span:first-child {
  background: none;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
button.modal_close span:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
button.modal_close span:after {
  -webkit-transform: translateY(-2px) rotate(-45deg);
  -moz-transform: translateY(-2px) rotate(-45deg);
  -ms-transform: translateY(-2px) rotate(-45deg);
  -o-transform: translateY(-2px) rotate(-45deg);
  transform: translateY(-2px) rotate(-45deg);
  top: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="btn_container">
  <a class="open_button" href="#">Fire Away</a>
</div>
<div class="modal_info">
  <h1>Simple jQuery Modal</h1>
  <p>It may not look like much, but it still does exactly what it says straight out of the box.</p>
</div>
<div class="modal_overlay"></div>

Answer 5

这是你想要的:)）

var modal = (function() {

  var $close = $('<button role="button" class="modal_close" title="Close"><span></span></button>');
  var $content = $('<div class="modal_content"/>');
  var $modal = $('<div class="modal"/>');
  var $window = $(window);

  $modal.append($content, $close);

  $close.on('click', function(e) {
    $('.modal, .modal_overlay').addClass('conceal');
    $('.modal, .modal_overlay').removeClass('display');
    $('.open_button').removeClass('load');
    e.preventDefault();
    modal.close();
  });

  return {
    center: function() {
      var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;
      var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;
      $modal.css({
        top: top + $window.scrollTop(),
        left: left + $window.scrollLeft(),
      });
    },
    open: function(settings) {
      $content.empty().append(settings.content);

      $modal.css({
        width: settings.width || 'auto',
        height: settings.height || 'auto'
      }).appendTo('body');

      modal.center();
      $(window).on('resize', modal.center);
    },
    close: function() {
      $content.empty();
      $modal.detach();
      $(window).off('resize', modal.center);
    }
  };
}());

(function() {
  var $content = $('.modal_info').detach();

  $('.open_button').on('click', function(e) {
    modal.open({
      content: $content,
      width: 540,
      height: 270,
    });
    $content.addClass('modal_content');
    $('.modal, .modal_overlay').addClass('display');
    $('.open_button').addClass('load');
  }).trigger('click');  
}());

@import url(https://fonts.googleapis.com/css?family=Palanquin:700);

html, body {
  background: #C7E5E6;
  font-family: 'Helvetica', Arial, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

h1 {
  color: #A6A49C;
  font-family: 'Palanquin', Arial, sans-serif;
}

p {
  color: #474544;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14px;
}

.modal {
  opacity: 0;
  padding: 50px;
  position: absolute;
  z-index: 1100;
  -webkit-transition: opacity 600ms linear 600ms;
  -moz-transition: opacity 600ms linear 600ms;
  -ms-transition: opacity 600ms linear 600ms;
  -o-transition: opacity 600ms linear 600ms;
  transition: opacity 600ms linear 600ms;
}

.modal_info {
  background: #FCF9F2;
  padding: 50px 100px;
  text-align: center;
}

.modal_overlay {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 900;
  -webkit-transition: opacity 200ms linear;
  -moz-transition: opacity 200ms linear;
  -ms-transition: opacity 200ms linear;
  -o-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}

.display {
  opacity: 1;
  visibility: visible;
}

.conceal {
  visibility: visible;
}

.btn_container {
  height: 100%;
  text-align: center;
}

.btn_container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.open_button {
  background: #363D4E;
  display: inline-block;
  height: 66px;
  position: relative;
  vertical-align: middle;
  whitespace: normal;
  width: 172px;
  z-index: 1000;
  -webkit-transition: opacity 100ms linear;
  -moz-transition: opacity 100ms linear;
  -ms-transition: opacity 100ms linear;
  -o-transition: opacity 100ms linear;
  transition: opacity 100ms linear;
}

a.open_button {
  color: #FFFFFF;
  letter-spacing: 2px;
  line-height: 66px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
 
a.open_button:hover {
  background: #3E465A;
}

a.open_button.load {
  opacity: 0;
}

button.modal_close {
  background: #363D4E;
  border: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  outline: none;
  width: 52px;
  height: 52px;
  position: absolute;
  right: 30px;
  top: 30px;
  -webkit-transition: -webkit-transform 600ms;
  -moz-transition: -moz-transform 600ms;
  -ms-transition: -ms-transform 600ms;
  -o-transition: -o-transform 600ms;
  transition: transform 600ms;
}

button.modal_close:hover {
  background: #3E465A;
  -webkit-transform: rotate(360deg) scale(1.10);
  -moz-transform: rotate(360deg) scale(1.10);
  -ms-transform: rotate(360deg) scale(1.10);
  -o-transform: rotate(360deg) scale(1.10);
  transform: rotate(360deg) scale(1.10);
  -webkit-transition: -webkit-transform 600ms;
  -moz-transition: -moz-transform 600ms;
  -ms-transition: -ms-transform 600ms;
  -o-transition: -o-transform 600ms;
  transition: transform 600ms;
}

button.modal_close span, span:before, span:after {
  background: #FFFFFF;
  content: '';
  cursor: pointer;
  display: block;
  height: 2px;
  position: absolute;
  width: 20px;
}

button.modal_close span:first-child {
  background: none;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

button.modal_close span:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

button.modal_close span:after {
  -webkit-transform: translateY(-2px) rotate(-45deg);
  -moz-transform: translateY(-2px) rotate(-45deg);
  -ms-transform: translateY(-2px) rotate(-45deg);
  -o-transform: translateY(-2px) rotate(-45deg);
  transform: translateY(-2px) rotate(-45deg);
  top: 2px;
}

<div class="btn_container">
  <a class="open_button" href="#">Fire Away</a>
</div>
<div class="modal_info">
  <h1>Simple jQuery Modal</h1>
  <p>It may not look like much, but it still does exactly what it says straight out of the box.</p>
</div>
<div class="modal_overlay">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>