I'm new to JavaScript and Jquery. I googled Jquery pop-up examples online. I want the message to say "Our website is not yet plete, but feel free to browse what we have." I'll include the code example I found, but it looks really weird. I'm not sure what the name of the function is and how to execute it using the window.onload = function(); code. I also want to have a button 'close' that closes the text box. Here'a what it should look like: /
Here's the first part:
(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);
Here's the second part:
$(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);
EDIT: I got the message to show up on loading. I changed the code in the second part to
$('.item .delete').ready(function(){
I'm new to JavaScript and Jquery. I googled Jquery pop-up examples online. I want the message to say "Our website is not yet plete, but feel free to browse what we have." I'll include the code example I found, but it looks really weird. I'm not sure what the name of the function is and how to execute it using the window.onload = function(); code. I also want to have a button 'close' that closes the text box. Here'a what it should look like: http://demo.tutorialzine./2010/12/better-confirm-box-jquery-css3/
Here's the first part:
(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);
Here's the second part:
$(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);
EDIT: I got the message to show up on loading. I changed the code in the second part to
Share edited Nov 20, 2012 at 5:40 Andrue asked Nov 20, 2012 at 4:16 AndrueAndrue 7073 gold badges11 silver badges27 bronze badges 6$('.item .delete').ready(function(){
- do you want a pop-up or a dialog for it. – Talha Ahmed Khan Commented Nov 20, 2012 at 4:19
- What do you mean? I want it to pop up when the page loads. I'm not sure what you mean by dialog. – Andrue Commented Nov 20, 2012 at 4:24
- pop-up in browser means that a new browser instance open with the same session information by the application. And a dialog means that a Div based Confirmation box open (just like an alert) and its a part of the same page – Talha Ahmed Khan Commented Nov 20, 2012 at 4:26
- any way i think i got your point and saw the example too. – Talha Ahmed Khan Commented Nov 20, 2012 at 4:26
- Dialog, then. I want something elegant instead of the traditional JavaScript alert. – Andrue Commented Nov 20, 2012 at 4:27
2 Answers
Reset to default 3Dialog window like, please see this image :
And please check this example: http://www.ericmmartin./projects/simplemodal/
There is various types of pop models: http://www.ericmmartin./projects/
And coding samples: http://www.ericmmartin./projects/simplemodal/#examples
Put this on the page.
Make sure that the first part
of your question is also included.
It will make a dialog box on the page center with a message and with a close button.
Also you can change the Heading, I just added a placeholder.
$(document).ready(function(){
$.confirm({
'title' : 'Heading Goes Here',
'message' : 'Our website is not yet plete, '
+ 'but feel free to browse what we have.',
'buttons' : {
'Close' : {
'class' : 'blue',
'action': function(){} // Nothing to do in this case.
}
{
});
});