popup form using html javascript css

Question

I have to open an html form in a popup  Popup should not be a window  that is usually created using window open      instead it should  be like one appeared in the link below  open in firefox  http   www w3schools com js tryit asp filename tryjs prompt But the problem with this code is that  I cannot change the content popup content from  Please enter your name  to my html form  While searching  I found that there we CANNOT change the content of popup Prompt Box and the only solution is to create your own popup    Isn t there any easier solution    Thank you

User · Answer

But the problem with this code is that  I cannot change the content popup content from  Please enter your name  to my html form     Umm  Just change the string passed to the prompt   function      While searching  I found that there we CANNOT change the content of popup Prompt Box   You can t change the title  You can change the content  it is the first argument passed to the prompt   function

User · Answer

Here is a resource you can edit and use Download Source Code or see live demo here http   purpledesign in blog pop-out-a-form-using-jquery-and-javascript   Add a Button or link to your page like this   lt p gt  lt a href   inline  gt click to open lt  a gt  lt  p gt        inline    here should be the    id    of the  that will contain the form    lt div id  inline  gt    lt h2 gt Send us a Message lt  h2 gt    lt form id  contact  name  contact  action     method  post  gt    lt label for  email  gt Your E-mail lt  label gt    lt input type  email  id  email  name  email  class  txt  gt    lt br gt    lt label for  msg  gt Enter a Message lt  label gt    lt textarea id  msg  name  msg  class  txtarea  gt  lt  textarea gt   lt button id  send  gt Send E-mail lt  button gt    lt  form gt   lt  div gt    Include these script to listen of the event of click  If you have an action defined in your form you can use    preventDefault      method   lt script type  text javascript  gt     document  ready function         modalbox   fancybox        contact   submit function     return false          send   on  click   function    var emailval       email   val    var msgval       msg   val    var msglen   msgval length  var mailvalid   validateEmail emailval   if mailvalid    false        email   addClass  error      else if mailvalid    true        email   removeClass  error         if msglen  lt  4         msg   addClass  error        else if msglen  gt   4        msg   removeClass  error         if mailvalid    true  amp  amp  msglen  gt   4        if both validate we attempt to send the e-mail     first we hide the submit btn so the user doesnt click twice      send   replaceWith   lt em gt sending    lt  em gt        This will post it to the php page    ajax    type   POST    url   sendmessage php    data      contact   serialize     success  function data     if data     true          contact   fadeOut  fast   function      Display a message on successful posting for 1 sec    this  before   lt p gt  lt strong gt Success  Your feedback has been sent  thanks    lt  strong gt  lt  p gt      setTimeout    fancybox close     1000                                 lt  script gt    You can add anything you want to do in your PHP file

User · Answer

Live Demo  Sounds like you might want a light box and since you didnt tag your question with jQuery included is a pure JS example of how to make one   JS  var opener   document getElementById  opener     opener onclick   function         var lightbox   document getElementById  lightbox            dimmer   document createElement  div         dimmer style width    window innerWidth    px       dimmer style height   window innerHeight    px       dimmer className    dimmer        dimmer onclick   function            document body removeChild this              lightbox style visibility    hidden              document body appendChild dimmer        lightbox style visibility    visible       lightbox style top   window innerHeight 2 - 50    px       lightbox style left   window innerWidth 2 - 100    px       return false      Markup   lt div id  lightbox  gt Testing out the lightbox lt  div gt   lt a href     id  opener  gt Click me lt  a gt    CSS   lightbox      visibility hidden      position absolute      background red      border 2px solid  3c3c3c      color white      z-index 100      width  200px      height 100px      padding 20px      dimmer      background   000      position  absolute      opacity   5      top  0      z-index 99

User · Answer

Look at easiest example to create popup using css and javascript    Create HREF link using HTML  Create a popUp by HTML and CSS Write CSS  Call JavaScript mehod   See the full example at this link http   makecodeeasy blogspot in 2012 07 popup-in-java-script-and-css html

User · Answer

There are plenty available  Try using Modal windows of Jquery or DHTML would do good  Put the content in your div or Change your content in div dynamically and show it to the user  It won t be a popup but a modal window  Jquery s Thickbox would clear your problem

User · Answer

Just replacing  Please enter your name  to your desired content would do the job   Am I missing something

User · Answer

Please try jQuery UI dialog  Here is the forms demo  For mobile use  have a look at jQuery Mobile - Creating dialogs

[javascript] popup form using html/javascript/css

Examples related to javascript

Examples related to html

Examples related to css