HTML CSS Popup div on text click

Question

I want to make popup div instead of popup window for my  About  picture page with current button like in this example

User · Answer

For the sake of completeness  what you are trying to create is a  modal window    Numerous JS solutions allow you to create them with ease  take the time to find the one which best suits your needs   I have used Tinybox 2 for small projects    http   sandbox scriptiny com tinybox2

User · Answer

You can simply use jQuery UI Dialog  Example    x000D   x000D    function     x000D        dialog   dialog    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8    gt  x000D     lt title gt jQuery UI Dialog - Default functionality lt  title gt  x000D     lt link rel  stylesheet  href  http   code jquery com ui 1 10 3 themes smoothness jquery-ui css    gt  x000D     lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt  x000D     lt link rel  stylesheet  href   resources demos style css    gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  dialog  title  Basic dialog  gt  x000D       lt p gt This is the default dialog which is useful for displaying information  The dialog window can be moved  resized and closed with the  x  icon  lt  p gt  x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

DEMO  In the content area you can provide whatever you want to display in it    x000D   x000D   black overlay   x000D    display  none  x000D    position  absolute  x000D    top  0   x000D    left  0   x000D    width  100   x000D    height  100   x000D    background-color  black  x000D    z-index  1001  x000D    -moz-opacity  0 8  x000D    opacity   80  x000D    filter  alpha opacity 80   x000D    x000D   white content   x000D    display  none  x000D    position  absolute  x000D    top  25   x000D    left  25   x000D    width  50   x000D    height  50   x000D    padding  16px  x000D    border  16px solid orange  x000D    background-color  white  x000D    z-index  1002  x000D    overflow  auto  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt LIGHTBOX EXAMPLE lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt p gt This is the main content  To display a lightbox click  lt a href  javascript void 0   onclick  document getElementById  light   style display  block  document getElementById  fade   style display  block   gt here lt  a gt  x000D     lt  p gt  x000D     lt div id  light  class  white content  gt This is the lightbox content   lt a href  javascript void 0   onclick  document getElementById  light   style display  none  document getElementById  fade   style display  none   gt Close lt  a gt  x000D     lt  div gt  x000D     lt div id  fade  class  black overlay  gt  lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

[css] HTML / CSS Popup div on text click

Examples related to css

Examples related to html

[css] HTML / CSS Popup div on text click

Examples related to css

Examples related to html

Examples related to popup