How to generate a simple popup using jQuery

Question

I am designing a web page  When we click the content of div named mail  how can I show a popup window containing a label email and text box

User · Answer

There is a good  simple example of exactly this  here  http   www queness com post 77 simple-jquery-modal-window-tutorial

User · Answer

I think this is a great tutorial on writing a simple jquery popup  Plus it looks very beautiful

User · Answer

I use a jQuery plugin called ColorBox  it is    Very easy to use lightweight customizable the nicest popup dialog I have seen for jQuery yet

User · Answer

First the CSS - tweak this however you like   a selected     background-color  1F75CC    color white    z-index 100      messagepop     background-color  FFFFFF    border 1px solid  999999    cursor default    display none    margin-top  15px    position absolute    text-align left    width 394px    z-index 50    padding  25px 25px 20px     label     display  block    margin-bottom  3px    padding-left  15px    text-indent  -15px      messagepop p   messagepop div     border-bottom  1px solid  EFEFEF    margin  8px 0    padding-bottom  8px      And the JavaScript   function deselect e          pop   slideFadeToggle function         e removeClass  selected                   function           contact   on  click   function         if   this  hasClass  selected            deselect   this                         else           this  addClass  selected              pop   slideFadeToggle              return false               close   on  click   function         deselect     contact         return false               fn slideFadeToggle   function easing  callback      return this animate   opacity   toggle   height   toggle      fast   easing  callback        And finally the html    lt div class  messagepop pop  gt     lt form method  post  id  new message  action   messages  gt       lt p gt  lt label for  email  gt Your email or name lt  label gt  lt input type  text  size  30  name  email  id  email    gt  lt  p gt       lt p gt  lt label for  body  gt Message lt  label gt  lt textarea rows  6  name  body  id  body  cols  35  gt  lt  textarea gt  lt  p gt       lt p gt  lt input type  submit  value  Send Message  name  commit  id  message submit   gt  or  lt a class  close  href     gt Cancel lt  a gt  lt  p gt     lt  form gt   lt  div gt    lt a href   contact  id  contact  gt Contact Us lt  a gt    Here is a jsfiddle demo and implementation   Depending on the situation you may want to load the popup content via an ajax call  It s best to avoid this if possible as it may give the user a more significant delay before seeing the content  Here couple changes that you ll want to make if you take this approach   HTML becomes    lt div gt       lt div class  messagepop pop  gt  lt  div gt        lt a href   contact  id  contact  gt Contact Us lt  a gt   lt  div gt    And the general idea of the JavaScript becomes       contact   on  click   function         if   this  hasClass  selected              deselect                         else             this  addClass  selected              get this href  function data                    pop   html data  slideFadeToggle function                         input type text  first   focus                                        return false

User · Answer

Let s try      How to create a simple popup by using HTML  CSS  and jquery      x000D   x000D    function            Open Popup         popup-open    on  click   function             var popup name     this  attr  popup-open         popup-name      popup name         fadeIn 300                    Close Popup         popup-close    on  click   function      var popup name     this  attr  popup-close         popup-name      popup name         fadeOut 300                    Close Popup When Click Outside         popup   on  click   function      var popup name     this  find   popup-close    attr  popup-close         popup-name      popup name         fadeOut 300          children   click function      return false                x000D  body       font-family Arial  Helvetica  sans-serif      p       font-size  16px      line-height  26px      letter-spacing  0 5px      color   484848         Popup Open button      open-button      color  FFF      background  0066CC      padding 10px      text-decoration none      border 1px solid  0157ad      border-radius 3px       open-button hover      background  01478e       popup       position fixed      top 0px      left 0px      background rgba 0 0 0 0 75       width 100       height 100       display none         Popup inner div     popup-content       width  700px      margin  0 auto      box-sizing  border-box      padding  40px      margin-top  100px      box-shadow  0px 2px 6px rgba 0 0 0 1       border-radius  3px      background   fff      position  relative         Popup close button     close-button       width  25px      height  25px      position  absolute      top  -10px      right  -10px      border-radius  20px      background  rgba 0 0 0 0 8       font-size  20px      text-align  center      color   fff      text-decoration none       close-button hover       background  rgba 0 0 0 1        media screen and  max-width  720px     popup-content       width 90            x000D   lt  DOCTYPE html gt   lt html gt   lt head gt    lt title gt  Popup  lt  title gt    lt script src  http   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt   lt  head gt     lt body gt       lt a class  open-button  popup-open  popup-1  href  javascript void 0   gt  Popup          Preview lt  a gt                     lt div class  popup  popup-name  popup-1  gt               lt div class  popup-content  gt               lt h2 gt Title of Popup  lt  h2 gt           lt p gt Popup 1 content will be here  Lorem ipsum dolor sit amet           consectetur adipiscing elit  Aliquam consequat diam ut tortor          dignissim  vel accumsan libero venenatis  Nunc pretium volutpat          convallis  Integer at metus eget neque hendrerit vestibulum           Aenean vel mattis purus  Fusce condimentum auctor tellus eget          ullamcorper  Vestibulum sagittis pharetra tellus mollis vestibulum           Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  p gt           lt a class  close-button  popup-close  popup-1  href  javascript void 0   gt x lt  a gt               lt  div gt           lt  div gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Extremely Lightweight Modal popup plugin  POPELT - http   welbour com labs popelt   It is lightweight  supports nested popups  object oriented  supports dynamic buttons  responsive  and lot more  Next update will include Popup Ajax form submissions etc   Feel free to use and tweet feedback

User · Answer

Check out jQuery UI Dialog  You would use it like this   The jQuery     document  ready function             dialog   dialog          The markup    lt div id  dialog  title  Dialog Title  gt I m in a dialog lt  div gt    Done   Bear in mind that s about the simplest use-case there is  I would suggest reading the documentation to get a better idea of just what can be done with it

User · Answer

Simple popup window by using html5 and javascript   html -       lt dialog id  window  gt          lt h3 gt Sample Dialog  lt  h3 gt          lt p gt Lorem ipsum dolor sit amet lt  p gt          lt button id  exit  gt Close Dialog lt  button gt       lt  dialog gt        lt button id  show  gt Show Dialog lt  button gt     JavaScript -      function                    var dialog   document getElementById  window                  document getElementById  show   onclick   function                       dialog show                                   document getElementById  exit   onclick   function                       dialog close

User · Answer

Try the Magnific Popup  it s responsive and weights just around 3KB

User · Answer

Here is a very simple popup    lt  DOCTYPE html gt   lt html gt       lt head gt           lt style gt               modal                   position absolute                  background gray                  padding 8px                              content                   background white                  padding 20px                              close                   position absolute                  background url close png                   width 24px                  height 27px                  top -7px                  right -7px                         lt  style gt           lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt script gt              var modal    function                       Generate the HTML and add it to the document                  modal       lt div id  modal  gt  lt  div gt                      content       lt div id  content  gt  lt  div gt                      close       lt a id  close  href     gt  lt  a gt                       modal hide                     modal append  content   close                      document  ready function                           body   append  modal                                                                close click function e                       e preventDefault                         modal hide                         content empty                                           Open the modal                 return function  content                         content html content                          Center the modal in the viewport                      modal css                           top     window  height   -  modal outerHeight      2                           left     window  width   -  modal outerWidth      2                                              modal show                                                         Wait until the DOM has loaded before querying the document               document  ready function                       a popup   click function e                       modal   lt p gt This is popup s content  lt  p gt                         e preventDefault                                                 lt  script gt       lt  head gt       lt body gt           lt a id  popup  href     gt Simple popup lt  a gt       lt  body gt   lt  html gt    More flexible solution can be found in this tutorial  http   www jacklmoore com notes jquery-modal-tutorial  Here s close png for the sample

User · Answer

Visit this url  Jquery UI Dialog Demos

User · Answer

ONLY CSS POPUP LOGIC  TRY DO IT   EASY  I think this mybe be hack popular in future               lt a href   openModal  gt OPEN lt  a gt                lt div id  openModal  class  modalDialog  gt                   lt div gt                       lt a href   close   class  close  gt X lt  a gt                       lt h2 gt MODAL lt  h2 gt                    lt  div gt               lt  div gt     modalDialog       position  fixed      font-family  Arial  Helvetica  sans-serif      top  0      right  0      bottom  0      left  0      background  rgba 0 0 0 0 8       z-index  99999      -webkit-transition  opacity 400ms ease-in      -moz-transition  opacity 400ms ease-in      transition  opacity 400ms ease-in      display  none      pointer-events  none      modalDialog target       display  block      pointer-events  auto      modalDialog  gt  div       width  400px      position  relative      margin  10  auto      padding  5px 20px 13px 20px      border-radius  10px      background   fff      background  -moz-linear-gradient  fff   999       background  -webkit-linear-gradient  fff   999       background  -o-linear-gradient  fff   999

[javascript] How to generate a simple popup using jQuery

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to ajax

[javascript] How to generate a simple popup using jQuery

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to ajax

Examples related to popup