jQuery How can I create a simple overlay

Question

How can I create a really basic overlay in jQuery without UI   What is a lightweight plugin

User · Answer

Please check this jQuery plugin    blockUI  with this you can overlay all the page or elements  works great for me    Examples  Block a div       div test   block   message  null       Block the page      blockUI   message    lt h1 gt  lt img src  busy gif    gt  Just a moment    lt  h1 gt        Hope that help someone  Greetings

User · Answer

What do you intend to do with the overlay  If it s static  say  a simple box overlapping some content  just use absolute positioning with CSS  If it s dynamic  I believe this is called a lightbox   you can write some CSS-modifying jQuery code to show hide the overlay on-demand

User · Answer

Here is a simple javascript only solution  function displayOverlay text            lt table id  overlay  gt  lt tbody gt  lt tr gt  lt td gt     text     lt  td gt  lt  tr gt  lt  tbody gt  lt  table gt    css            position    fixed            top   0           left   0           width    100             height    100             background-color    rgba 0 0 0  5             z-index   10000           vertical-align    middle            text-align    center            color     fff            font-size    30px            font-weight    bold            cursor    wait         appendTo  body       function removeOverlay             overlay   remove        Demo   http   jsfiddle net UziTech 9g0pko97   Gist   https   gist github com UziTech 7edcaef02afa9734e8f2

User · Answer

If you re already using jquery  I don t see why you wouldn t also be able to use a lightweight overlay plugin  Other people have already written some nice ones in jquery  so why re-invent the wheel

User · Answer

An overlay is  simply put  a div that stays fixed on the screen  no matter if you scroll  and has some sort of opacity   This will be your CSS for cross browser opacity of 0 5    overlay       position  fixed      top  0      left  0      width  100       height  100       background-color   000      filter alpha opacity 50       -moz-opacity 0 5      -khtml-opacity  0 5      opacity  0 5      z-index  10000      This will be your jQuery code  no UI needed   You re just going to create a new element with the ID  overlay  Creating and destroying the DIV should be all you need   var overlay   jQuery   lt div id  overlay  gt   lt  div gt     overlay appendTo document body    For performance reasons you might wanna have the DIV hidden and setting the display to block and none as you need it or not   Hope it helps   Edit  As  Vitaly so well put it  be sure to check your DocType  Read more on the comments on his findings

User · Answer

Here s a fully encapsulated version which adds an overlay  including a share button  to any IMG element where data-photo-overlay  true   JSFiddle http   jsfiddle net wloescher 7y6UX 19   HTML   lt img id  my-photo-id  src  http   cdn sstatic net stackexchange img logos so so-logo png  alt  Photo  data-photo-overlay  true    gt    CSS   photoOverlay       background   ccc      background  rgba 0  0  0   5       display  none      height  50px      left  0      position  absolute      text-align  center      top  0      width  50px      z-index  1000      photoOverlayShare       background   fff      border  solid 3px  ccc      color   ff6a00      cursor  pointer      display  inline-block      font-size  14px      margin-left  auto      margin  15px      padding  5px      position  absolute      left  calc 100  - 100px       text-transform  uppercase      width  50px      JavaScript   function             Add photo overlay hover behavior to selected images        img data-photo-overlay  true     mouseenter showPhotoOverlay           Create photo overlay elements     var  isPhotoOverlayDisplayed   false      var  photoId      var  photoOverlay       lt div id  photoOverlay  gt  lt  div gt         var  photoOverlayShareButton       lt div id  photoOverlayShare  gt Share lt  div gt             Add photo overlay events      photoOverlay mouseleave hidePhotoOverlay        photoOverlayShareButton click sharePhoto           Add photo overlay elements to document      photoOverlay append  photoOverlayShareButton        photoOverlay appendTo document body           Show photo overlay     function showPhotoOverlay e               Get sender          var sender     e target    e srcElement               Check to see if overlay is already displayed         if    isPhotoOverlayDisplayed                   Set overlay properties based on sender              photoOverlay width sender width                  photoOverlay height sender height                     Position overlay on top of photo             if  sender 0  x                     photoOverlay css  left   sender 0  x    px                     photoOverlay css  top   sender 0  y     px                             else                      Handle IE incompatibility                  photoOverlay css  left   sender offset   left                    photoOverlay css  top   sender offset   top                                 Get photo Id              photoId   sender attr  id                    Show overlay              photoOverlay animate   opacity   toggle                   isPhotoOverlayDisplayed   true                          Hide photo overlay     function hidePhotoOverlay e            if   isPhotoOverlayDisplayed                 photoOverlay animate   opacity   toggle                   isPhotoOverlayDisplayed   false                          Share photo     function sharePhoto             alert  TODO  Share photo   PhotoId        photoId

User · Answer

By overlay do you mean content that overlaps covers the rest of the page   In HTML  you could do this by using a div that uses absolute or fixed positioning   If it needed to be generated dynamically  jQuery could simply generate a div with the position style set appropriately

[jquery] jQuery: How can I create a simple overlay?

Examples related to jquery