Popup using html / javascript / css

Question

I need to open an html form in a popup. The popup should not be a window (which is usually created using window.open ()), instead it should look like one of the links 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 of the "Please enter your name" content pop-ups in my html form. During the search, I found that we CANNOT change the contents of the Prompt Box popup, and the only solution is to create our own popup ... Is there a simpler solution?

Thanks....

Answer 1

Try the jQuery UI dialog

Here is the demon

For mobile use, see jQuery Mobile - creating dialogs

Answer 2

Live demo

It looks like you might need a light block, and since you didn't mark your question with jQuery turned on, this is a pure JS example of how to make it.

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

 <div id="lightbox">Testing out the lightbox</div> <a href="#" id="opener">Click me</a> 

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; } 

Answer 3

But the problem with this code is that I cannot change the content of the pop-up content of the content "Please enter your name" in my html form.

Umm. Just change the line passed to the prompt() function.

During the search, I found that we CANNOT change the contents of the Prompt Box popup

You cannot change the title. . You can change the contents, this is the first argument passed to the prompt() function.

Answer 4

Just replacing “Please enter your name” with your desired content will do the job. Did I miss something?

Answer 5

Take a look at a simple example of creating pop-ups using css and javascript.

• Create an HREF link using HTML.
• Create a popup using HTML and CSS
• Create CSS
• JavaScript call mehod

See the full example at this link http://makecodeeasy.blogspot.in/2012/07/popup-in-java-script-and-css.html

Answer 6

Here is a resource that you can edit and use Download the source code or see the demo here. http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Add a button or link to your page as follows

 <p><a href="#inline">click to open</a></p> 

"# inline" here should be the "id" of the one that will contain the form.

 <div id="inline"> <h2>Send us a Message</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email">Your E-mail</label> <input type="email" id="email" name="email" class="txt"> <br> <label for="msg">Enter a Message</label> <textarea id="msg" name="msg" class="txtarea"></textarea> <button id="send">Send E-mail</button> </form> </div> 

Include these scripts to listen for the click event. If you have an action defined in your form, you can use the "preventDefault ()" method

 <script type="text/javascript"> $(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 < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){ $("#msg").removeClass("error"); } if(mailvalid == true && msglen >= 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("<em>sending...</em>"); //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("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>"); setTimeout("$.fancybox.close()", 1000); }); } } }); } }); }); </script> 

You can add everything you want to do to your PHP file.

Answer 7

There are many available. Try using jQuery or DHTML modal windows. Put the content in your div or change your content in the div dynamically and show it to the user. This will not be a popup, but a modal window.
JQuery Thickbox will fix your problem.