Posted By

Waldio on 02/16/11

Tagged

plugin

Versions (?)

Last Edited at 02/16/11 08:20am

Statistics

Viewed 450 times

Favorited by 0 user(s)

Related snippets

jQuery UIblock plugin met uitleg

/ Published in: HTML

Highlighted TextExpand

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
   
    <script type="text/javascript" src="http://waldio.webatu.com/system/jquery/jquery.min.js"></script>
   
    <script type="text/javascript" src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></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>
   
    <a href="javascript:void(0);" id="iets">Hier een link</a>
  </body>
</html>

URL: http://waldio.110mb.com/js/jQuery/uiblock.htm

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.