how to create facebook like dilog boxes ?

Replies

• 

  eternalthinker

  CSS and bit of jQuery should do it without much hassle
• 

  PraveenKumar Purushothaman

  Try jQuery Boxy: #-Link-Snipped-#
• 

  eternalthinker

  Praveen-Kumar

  Try jQuery Boxy: #-Link-Snipped-#

  That's a good find! 😀
  
  Anyhow, if he needs only static dialogue boxes with just a close button, I think writing some CSS and a couple of lines of jQuery would be more light weight.
• 

  PraveenKumar Purushothaman

  Will send you one with even more light weight then... Behold.! 😀
• 

  The_Small_k

  I have done it guy's.
  Have to add some css scripts on it nothing else.
• 

  PraveenKumar Purushothaman

  The_Small_k

  I have done it guy's.
  Just have to add some css scripts on it nothing else.

  Awesome!!! Show the demo!!! 😁 What did you use? Boxy???
• 

  The_Small_k

  ok try this one....
  save this code in a file as style.css and link them to your html page
  
  

  body {
      margin:0 auto;
  }
  #content {
      margin:0 auto;
      background-color:red;
  }
  #nav {
      font-family: Arial, Helvetica, sans-serif;
      font-size:12px;
      padding-top:4px;
  }
  #nav a {
      display:block;
      padding:7px 7px 7px 7px;
      color:#ccc;
      text-decoration:none;
  }
   
  #nav, #nav ul {
      padding: 0;
      margin: 0;
      list-style: none;
      font-family: Arial, Helvetica, sans-serif;
  }
   
  #nav a.dmenu {
   
  }
   
  #nav a.dmenu:hover {
      color:#3366CC !important;
      background-color: #fff;
  }
   
  #nav li:hover a, #nav a:focus,
  #nav a:active {
      padding:7px 7px 7px 7px;
      color:#fff;
      background:#444;
      text-decoration:none;
  }
  #nav li ul{
      position: absolute;
      display: none;
      margin-left:-1px;
      padding-bottom:10px;
      background-color: #FFFFFF;
      border: 1px solid #bbb;
      border-top:none;
      -moz-box-shadow: 0 0 5px #ddd;
      -webkit-box-shadow: 0 0 5px #ddd;
      box-shadow: 0 0 5px #ddd;
      z-index:5000;
      height:500px;
      width:200px;
  }
  #nav li:hover ul {
      display: block;
  }
  #nav li {position: static; width: auto;}
   
  #nav li:hover ul a{
      color: #000000;
      background-color: transparent;
  }
   
  #nav ul a:hover {
      background-color: #606060;
      color: #FFFFFF;
  }
   
  .floatleft {
      float:left;
  }

  here is the html page...
  

  
  
      
  
  
  
      
  
          
  [url=#]Demo[/url]
              
  
                  [*][url=#]First Option[/url]
                  [*][url=#]Second Option[/url]
                  [*][url=#][/url]
                  [*][url=#]Third Option[/url]
              
          
      
  
  
  

• 

  PraveenKumar Purushothaman

  Is it a mouseover drop down menu you posted??? I thought you said facebook like post... 😐