How to Create a Facebook Style Alert Confirm Box with jQuery and CSS

0
64

fbAlerIn this tutorial, you will learn how to create a Facebook Style Alert Confirm Box with jQuery and CSS. This is a simple implementation of jQuery and CSS that overrides the old alert box.

 

These are the following jQuery plugins that you should put.

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.alerts.js"></script>

 

Let’s begin:

 

  • Create a page and name it “facebook.php“.
  • Create a style for the pop-up message:
<style type="text/css"> /* pop up id */
#popup_container {
 margin: 0;
 padding: 0;
 height: 100px;
 background: #f0ecec;
 border: solid 1px #dedede;
 border-bottom: solid 2px #456FA5;
 color: #000;
}

/* pop message */
#popup_message {
/*padding-top: 15px;*/
 padding-left: 15px;
}

/* pop up panel id */
#popup_panel {
 text-align: left;
 padding-left: 15px;
 padding-bottom: 0;
}

/* for the button in the pop up message */
input {
 background-color: #554df7;
 padding: 3px;
 color: #FFF;
 margin-top: 20px;
 margin-right: 10px;
}
/* for the image in the wrap */
#wrap > img{
height: 100%;
width: 100%;
}
</style>
  • Do these following codes for the box with a close link.
<div><h1>Facebook Style Alert Confirm Box with jQuery and CSS.</h1></div> 
<div id="wrap" style=" background-color:#fff; border:1px solid #dedede; height:100px; width:300px;">
 <div style="float:right; width:60px; height:20px"><a href="#" id="Close" >Close</a></div>
 <img src="Liza.jpg" >
</div>
  • Create a method for calling the pop-up message.
<script type="text/javascript"> 
 $(document).ready( function() {
 
 $("#Close").click( function() 
 {
 /* confirm messaage */
 jConfirm('Are you sure you want to Close this thread?', '', 
 
 function(f) {
 
 
 if(f==true)
 {

 $("#wrap").fadeOut(900);
 }
 
 });
 }); 
 });

 </script>

 

For all students who need a programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @:

 

Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – TNT

If you have any questions or suggestion, please feel free to contact us at our contact page.

 

Please help us grow by sharing this article with your friends. Thank you.

Down the full source code here. Download Sourcecode

Facebook Comments
(Visited 88 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here