[英]Jquery Popup Box
我是JavaScript和Jquery的新手。 我在網上搜索了Jquery彈出式示例。 我想要的信息是“我們的網站還沒有完整,但隨時可以瀏覽我們的網站。” 我將包括我找到的代碼示例,但它看起來很奇怪。 我不確定函數的名稱是什么以及如何使用window.onload = function()執行它。 碼。 我還想要一個關閉文本框的“關閉”按鈕。 這就是它應該是什么樣子: http ://demo.tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
這是第一部分:
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
這是第二部分:
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
elem.slideUp();
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
編輯:我收到消息,顯示加載。 我將第二部分的代碼更改為
$('。item .delete')。ready(function(){
對話窗口,請看這個圖片:
請查看此示例: http : //www.ericmmartin.com/projects/simplemodal/
有各種類型的流行模型: http : //www.ericmmartin.com/projects/
編碼樣本: http : //www.ericmmartin.com/projects/simplemodal/#examples
把它放在頁面上。
確保您的問題的first part
也包含在內。
它將在頁面中心創建一個帶有消息和關閉按鈕的對話框。
你也可以改變標題,我剛添加一個占位符。
$(document).ready(function(){
$.confirm({
'title' : 'Heading Goes Here',
'message' : 'Our website is not yet complete, '
+ 'but feel free to browse what we have.',
'buttons' : {
'Close' : {
'class' : 'blue',
'action': function(){} // Nothing to do in this case.
}
{
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.