ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

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

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 overides 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 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

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!