Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3


Introduction

  • 2. CSS

    This is the first time I use CSS3. CSS3 is a hot topic lately because safari, chrome, firefox and IE8 start supporting it. Some of the websites like twitter has been using CSS3 as well. The following is the CSS code and I have added comments in each of the section.
    1. #dialog-overlay {
    2.     /* set it to fill the whil screen */
    3.     width:100%;
    4.     height:100%;
    5.     
    6.     /* transparency for different browsers */
    7.     filter:alpha(opacity=50);
    8.     -moz-opacity:0.5;
    9.     -khtml-opacity: 0.5;
    10.     opacity: 0.5;
    11.     background:#000;
    12.     /* make sure it appear behind the dialog box but above everything else */
    13.     position:absolute;
    14.     top:0; left:0;
    15.     z-index:3000;
    16.     /* hide it by default */
    17.     display:none;
    18. }
    19. #dialog-box {
    20.     
    21.     /* css3 drop shadow */
    22.     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    23.     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    24.     
    25.     /* css3 border radius */
    26.     -moz-border-radius: 5px;
    27. -webkit-border-radius: 5px;
    28.     
    29.     background:#eee;
    30.     /* styling of the dialog box, i have a fixed dimension for this demo */
    31.     width:328px;
    32.     
    33.     /* make sure it has the highest z-index */
    34.     position:absolute;
    35.     z-index:5000;
    36.     /* hide it by default */
    37.     display:none;
    38. }
    39. #dialog-box .dialog-content {
    40.     /* style the content */
    41.     text-align:left;
    42.     padding:10px;
    43.     margin:13px;
    44.     color:#666;
    45.     font-family:arial;
    46.     font-size:11px;
    47. }
    48. a.button {
    49.     /* styles for button */
    50.     margin:10px auto 0 auto;
    51.     text-align:center;
    52.     display: block;
    53.     width:50px;
    54.     padding: 5px 10px 6px;
    55.     color: #fff;
    56.     text-decoration: none;
    57.     font-weight: bold;
    58.     line-height: 1;
    59.     
    60.     /* button color */
    61.     background-color: #e33100;
    62.     
    63.     /* css3 implementation :) */
    64.     /* rounded corner */
    65.     -moz-border-radius: 5px;
    66.     -webkit-border-radius: 5px;
    67.     
    68.     /* drop shadow */
    69.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    70.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    71.     
    72.     /* text shaow */
    73.     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    74.     border-bottom: 1px solid rgba(0,0,0,0.25);
    75.     position: relative;
    76.     cursor: pointer;
    77.     
    78. }
    79. a.button:hover {
    80.     background-color: #c33100;    
    81. }
    82. /* extra styling */
    83. #dialog-box .dialog-content p {
    84.     font-weight:700; margin:0;
    85. }
    86. #dialog-box .dialog-content ul {
    87.     margin:10px 0 10px 20px;
    88.     padding:0;
    89.     height:50px;
    90. }

    3. Javascript

    Alright, I reference part of the javascript from jQuery modal window tutorial. I write a popup function for this dialog box so that it can be called easily.
    1. $(document).ready(function () {
    2.     // if user clicked on button, the overlay layer or the dialogbox, close the dialog    
    3.     $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {        
    4.         $('#dialog-overlay, #dialog-box').hide();        
    5.         return false;
    6.     });
    7.     
    8.     // if user resize the window, call the same function again
    9.     // to make sure the overlay fills the screen and dialogbox aligned to center    
    10.     $(window).resize(function () {
    11.         
    12.         //only do it if the dialog box is not hidden
    13.         if (!$('#dialog-box').is(':hidden')) popup();        
    14.     });    
    15.     
    16.     
    17. });
    18. //Popup dialog
    19. function popup(message) {
    20.         
    21.     // get the screen height and width
    22.     var maskHeight = $(document).height();
    23.     var maskWidth = $(window).width();
    24.     
    25.     // calculate the values for center alignment
    26.     var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
    27.     var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
    28.     
    29.     // assign values to the overlay and dialog box
    30.     $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    31.     $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
    32.     
    33.     // display the message
    34.     $('#dialog-message').html(message);
    35.             
    36. }

    Conclusion

    That's it, hope you enjoyed reading this. Drop us a comment if you have any questions.
    Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3 Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3 Reviewed by Aamir Pathan on 11:12 AM Rating: 5