custom confirm dialog in the form use jQuery plugin

Home Lightbox & Dialog & Overlaycustom confirm dialog in the form use jQuery plugin

custom confirm dialog in the form use jQuery plugin

13 years ago Views

18655

2496

tutorialzine

custom confirm dialog in the form use jQuery plugin

Continuing on our quest for building customizable alternatives for browser’s controls, this week we are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.

HTML

Although we are mainly concentrating on the confirmation dialog, lets first say a few words about the page on which we are going to use it. If you are eager to see the plugin’s source code, you can skip this step and scroll down to the jQuery part of the tutorial.

index.php

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>

<!-- Including the Cuprum font with @font-face from Google's webfont API  -->

<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />

</head>
<body>

<div id="page">

        <div class="item">
            <a href="http://tutorialzine.com/?p=1274">
             <img src="http://cdn.tutorialzine.com/img/featured/1274.jpg" title="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" alt="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" width="620" height="340" />
            </a>
            <div class="delete"></div>
        </div>

        <!-- Other "item" divs -->

</div>

<!-- Including jQuery and our jQuery Confirm plugin -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>

</body>
</html>

In the head section of the document, I am including the Cuprum font from Google’s Font Directory, jquery.confirm.css, which is the stylesheet for the confirm dialog, and styles.css, which styles the example page.

At the bottom of the body section, I’ve included the jQuery library, jquery.confirm.js, which is the main plugin file, and script.js, which listens for the click event on the example page uses fires up the plugin. These last two files are discussed in the final step of this tutorial.

The dialog box itself is nothing more than a few lines of HTML. Bellow you can see the code that is inserted by the plugin to display the confirm window.

Example code for the dialog

<div id="confirmOverlay">
    <div id="confirmBox">

        <h1>Title of the confirm dialog</h1>
        <p>Description of what is about to happen</p>

        <div id="confirmButtons">
            <a class="button blue" href="#">Yes<span></span></a>
            <a class="button gray" href="#">No<span></span></a>
        </div>
    </div>
</div>

This code is appended to the body of the document. The confirmOverlay is displayed over the rest of the page, preventing any interactions with it while the dialog is visible (modal behavior). The h1, p and the confirmButtons div are populated according to the arguments you pass to the plugin. You will read more on that later on in this article.

CSS

The styling of the confirm dialog is contained in jquery.confirm.css. This makes it easier to include into an existing project, and it is built in such a way, that you can be sure it will not clash with the rest of your page styles.

jquery.confirm.css

#confirmOverlay{
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 background:url('ie.png');
 background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
 z-index:100000;
}

#confirmBox{
 background:url('body_bg.jpg') repeat-x left bottom #e5e5e5;
 width:460px;
 position:fixed;
 left:50%;
 top:50%;
 margin:-130px 0 0 -230px;
 border: 1px solid rgba(33, 33, 33, 0.6);

 -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
 box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox h1,
#confirmBox p{
 font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 background:url('header_bg.jpg') repeat-x left bottom #f5f5f5;
 padding: 18px 25px;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
 color:#666;
}

#confirmBox h1{
 letter-spacing:0.3px;
 color:#888;
}

#confirmBox p{
 background:none;
 font-size:16px;
 line-height:1.4;
 padding-top: 35px;
}

#confirmButtons{
 padding:15px 0 25px;
 text-align:center;
}

#confirmBox .button{
 display:inline-block;
 background:url('buttons.png') no-repeat;
 color:white;
 position:relative;
 height: 33px;

 font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;

 margin-right: 15px;
 padding: 0 35px 0 40px;
 text-decoration:none;
 border:none;
}

#confirmBox .button:last-child{ margin-right:0;}

#confirmBox .button span{
 position:absolute;
 top:0;
 right:-5px;
 background:url('buttons.png') no-repeat;
 width:5px;
 height:33px
}

#confirmBox .blue{    background-position:left top;text-shadow:1px 1px 0 #5889a2;}
#confirmBox .blue span{   background-position:-195px 0;}
#confirmBox .blue:hover{  background-position:left bottom;}
#confirmBox .blue:hover span{ background-position:-195px bottom;}

#confirmBox .gray{    background-position:-200px top;text-shadow:1px 1px 0 #707070;}
#confirmBox .gray span{   background-position:-395px 0;}
#confirmBox .gray:hover{  background-position:-200px bottom;}
#confirmBox .gray:hover span{ background-position:-395px bottom;}

A handful of CSS3 declarations are used. In the #confirmOverlay definition, we are using CSS3 gradients (only available in Firefox, Safari and Chrome for now), with a transparent PNG fallback for the rest.

Later, in the #confirmBox, which is centered in the middle of the screen, I’ve added an inset box-shadow, which is in effect a highlight (think of Photoshop’s inner glow). Also I’ve used the Cuprum font, which was included from Google’s Font Directory.

Along with some text shadows, you can see the styling of the buttons. They are built using the sliding doors technique. Currently two designs are available – blue and gray. You can add a new button color by specifying additional declarations.

jQuery

Before moving to the source code of the plugin, lets first see what we are after. In script.js you can see how the plugin is called.

script.js

$(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.
    }
   }
  });

 });

});

When the .delete div is clicked in our example page, the script is executes the $.confirm function, defined by our plugin. It then passes the title of the dialog, the description, and an object with the buttons. Each button takes the name of a CSS class and an action property. This action is the function that is going to be executed when the button is clicked.

Now lets move to the interesting part. In jquery.confirm.js you can see the source code of our confirm dialog alternative.

jquery.confirm.js

(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);

Our plugin defines the $.confirm() method. What it does, is read the arguments you’ve passed, construct the markup, and then add it to the page. As the #confirmOverlay div is assigned a fixed positioning in its CSS declaration, we can leave it to the browser to center it on the screen and move it when the visitor scrolls the page.

After adding the markup, the script assigns event handlers for the click events, executing the action parameter for the respective button.

With this our jQuery-powered Confirm Dialog is complete!

Wrapping it up

You can customize the appearance of the dialog by modifying jquery.confirm.css. As the message attribute of the dialog takes HTML text, you can further customize it by displaying images and icons in the confirm window.

You can even alternatively use this plugin as an alert dialog – you will just need to pass a single button with no action attribute.

Tag: form, dialog