Log ind box

Du vil sagtens kunne bruge jquery ui dialog eller f.eks. en anden form for modal vindue til, at logge ind med. Indholdet i vinduet er ikke andet end almindelig form. Så det er faktisk ikke så svært, at lave

HTML kode 

 <div id="dialog" title="Basic dialog">
   <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 </div>

JScript kode 

 <script>
   $(function() {
     $( "#dialog" ).dialog();
   });
   </script>

ja, så lig en form og noget indhold ind. Du skal gøre det, som du vil gøre det med almindeligt log ind, det skal bare ind i dialog boksen.

JScript kode 

 $(document).ready(function() {  
         //select all the a tag with name equal to modal
         $('a[name=modal]').click(function(e) {
             //Cancel the link behavior
             e.preventDefault();
             //Get the A tag
             var id = $(this).attr('href');
 
             //Get the screen height and width
             var maskHeight = $(document).height();
             var maskWidth = $(window).width();
 
             //Set height and width to mask to fill up the whole screen
             $('#mask').css({'width':maskWidth,'height':maskHeight});
 
             //transition effect     
             $('#mask').fadeIn(1000);    
             $('#mask').fadeTo("slow",0.8);  
 
             //Get the window height and width
             var winH = $(window).height();
             var winW = $(window).width();
 
             //Set the popup window to center
             $(id).css('top',  winH/2-$(id).height()/2);
             $(id).css('left', winW/2-$(id).width()/2);
 
             //transition effect
             $(id).fadeIn(2000); 
 
         });
         //if close button is clicked
         $('.window .close').click(function (e) {
             //Cancel the link behavior
             e.preventDefault();
             $('#mask, .window').hide();
         });     
         //if mask is clicked
         $('#mask').click(function () {
             $(this).hide();
             $('.window').hide();
         });         
     });

HTML kode 

 <ul>
             <li id="login"><a href="/#dialog" name="modal"><img src="/img/top_r/login.png" alt="log ind"></a></li>
         </ul>
     <div id="boxes">
         <div id="dialog" class="window">
             <b>Testing of Modal Window</b> | 
             <a href="#" class="close">Close it</a>
         </div>
         <div id="mask"></div>
     </div>