2016-03-15 152 views
1

单击时,下面的脚本应显示如下模式对话框:http://codepen.io/dfitzy/pen/yeoeGO如何在页面加载时显示弹出窗口,而不是单击按钮时弹出窗口?我尝试使用onload,但没有发生任何事情。有任何想法吗?加载popup 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> 
+1

你可以试试这个=> $( 'open_button。')准备就绪(函数(E){...}); –

回答

1

我觉得这是你所需要的

$(document).ready(function() { 

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

这里是refernce Link

1

这是一个肮脏的黑客,但如果你想弹出的开口保持连接点击。您可以执行以下操作:

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

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

1

它应该工作,

试试这个

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

0

这就是你想要:)

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>

1

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