加载弹出加载

Load popup onload?

本文关键字：加载      更新时间：2023-09-26

单击时，下面的脚本应显示如下所示的模式对话框： 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>

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

$(document).ready(function() {     
  //bind the click to '.open_button' here
  /* trigger click not bind */
  $('.open_button').click();
});

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

$(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>

它应该可以工作，

试试这个

$(document).ready(function (e){而不是$('.open_button').on('click', function(e){

我认为这就是你需要的

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

这是参考链接

你想要:)

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>

相关文章：