Facebook Style Alert Confirm Box Using CSS and jQuery

Submitted by janobe on Monday, June 27, 2016 - 08:04.
This time, I will show you how to make a Facebook Style Alert Confirm Box using CSS and jQuery. This method is usually used for confirming or deleting something in a website. A dialog box will then appear to inform the user whether he decides to delete or not the thread that he have created. Use the following jQuery Plugins as follows:
  1. <script type="text/javascript" src="jquery/jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery/jquery.alerts.js"></script>

Let's begin:

1. Create a landing page and name it "index.php". 2. Create a CSS style for the confirm box.
  1. <style type="text/css">
  2. /* pop up id */
  3. #popup_container {  
  4.         margin: 1px;
  5.         padding: 1px;
  6.         height: 110px;
  7.         background: #f0ecec;
  8.         border:solid 1px #dedede;
  9.         border-bottom: solid 1px #456FA5;
  10.         color: #000;
  11. }
  12.  
  13. /* pop message */
  14. #popup_message {
  15. padding-left: 16px;
  16. }
  17. /* pop up panel id */
  18. #popup_panel {
  19. text-align: left;
  20. padding-left:19px;
  21. padding-bottom: 0;
  22.        
  23. }
  24. /* for the button in the pop up message */
  25. input{
  26. background-color:#554df7;
  27. padding:4px;
  28. color:#FFFFFF;
  29. margin-top:21px;
  30. margin-right:11px;
  31. }
  32. #wrap{
  33. border:1px solid #dedede;
  34. height:150px;
  35. width:200px;
  36. }
  37. /* for the image in the box */
  38. #wrap> img {
  39. margin-top: -5px;
  40. margin-left: 1px;
  41. height: 90%;
  42. width: 99%;
  43. }
  44. #wrap> #close a{
  45. float:right;
  46. width:10px;
  47. height:18px;
  48. text-decoration: none;
  49. }
  50. </style>
3. Create a design of the box with a "x" link.
  1. <div><h1>Facebook Style Alert Confirm Box Using CSS and jQuery.</h1></div>
  2. <div id="wrap" >
  3.         <div id="close" ><a href="#" id="del" title="Close">x</a></div>
  4.         <img src="https://dermamodels.co.uk/wp-content/uploads/2015/06/Become-a-Botox-or-Dermal-Fillers-Model.png" >
  5. </div>
4. Create a script for calling the method of the alert box.
  1. <script type="text/javascript">
  2.                         $(document).ready( function() {
  3.                                  
  4.                         $("#del").click( function()
  5.                         {
  6.                                         /* confirm messaage */
  7.                                         jConfirm('Are you sure you want to hide this thread?', '',
  8.                                
  9.                                     function(f) {
  10.                                        
  11.                                        
  12.                                         if(f==true)
  13.                                         {
  14.  
  15.                                             $("#wrap").fadeOut(1200);
  16.                                         }
  17.                                                  
  18.                                         });
  19.                                 });
  20.                                
  21.                         });
  22.                        
  23.                 </script>

Output :

Output For all students who need a programmer for your thesis system or anyone who needs a source code in any programming languages. You can contact me @ : Email – [email protected] Mobile No. – 09305235027 – TNT
Tags
confirm box
confirm box with jquery
Alert box with jQuery

Add new comment

About text formats
  • 67 views