Advanced Search

Return to Snippet

Revision: 41322
at February 16, 2011 08:20 by Waldio
Initial Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
   <!-- Laad jQuery in -->
    <script type="text/javascript" src="http://waldio.webatu.com/system/jquery/jquery.min.js"></script>
   <!-- Laad jQuery block in -->
    <script type="text/javascript" src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
   <!-- Het jQuery script -->
    <script type="text/javascript">
     // Als het document klaar is om te starten
      $(document).ready(function() {

       // Zodra er op #iets wordt geklikt wordt deze functie gebruikt
        $('#iets').click(function() { 

           // Maak een block aan -met de plugin-
            $.blockUI({ 
             // De tekst in het block
              message: '<h1>Het is gelukt!</h1>',
             // De CSS van het block
              css: {
                border: 0,
                opacity: .7
              },
             // De CSS van het gebied dat over het document wordt geplaatst
              overlayCSS: {
                background: '#00E'
              }
           // Sluit block af
            }); 

           // Laat het block na 2000 miliseconden (2 sec.) verdwijnen
            setTimeout($.unblockUI, 2000); 
       // Sluit functie
        }); 
   // Sluit document.ready
    }); 
    </script>
  </head>
  <body>
   <!-- Maak een link aan met het id iets. Dus zodra er hierop wordt geklikt gaat de functie voor #iets.click aan de gang (zie hierboven)-->
    <a href="javascript:void(0);" id="iets">Hier een link</a>
  </body>
</html>
Initial URL 
http://waldio.110mb.com/js/jQuery/uiblock.htm
Initial Description 









Initial Title





jQuery UIblock plugin met uitleg









Initial Tags





plugin









Initial Language





HTML