popup form using html/javascript/css

I have to open an html form in a popup. Popup sho开发者_如何学编程uld 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....

Please try jQuery UI dialog

Here is the forms demo

For mobile use, have a look at jQuery Mobile - Creating dialogs

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

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

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.

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

Look at easiest example to create popup using css and javascript.

1. Create HREF link using HTML.
2. Create a popUp by HTML and CSS
3. Write CSS
4. Call JavaScript mehod

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

If you are searching for a way that is easy to make dialog, please reference the dialog.

Other Example

<button id="btn-login">Click me to open the dialog</button>
<dialog style="width:50vw">
  <header>Login</header>
  <form>
    <input id="input-username" type="text" minlength="5" placeholder="username"><br>
    <input id="input-password" type="password" minlength="3" placeholder="password"><br>
    <input type="submit"> <button id="btn-cancel">Cancel</button>
  </form>
</dialog><br>
<output></output>
<script>
  const dialog = document.querySelector(`dialog`)
  const form = dialog.querySelector(`form`)
  const btnLogin = document.querySelector(`#btn-login`)
  const inputUsername = document.querySelector(`#input-username`)
  const inputPassword = document.querySelector(`#input-password`)
  const btnCancelDialog = document.querySelector(`#btn-cancel`)
  const output = document.querySelector(`output`)
  btnLogin.onclick = () => {
    form.reset()
    dialog.showModal()
  }
  btnCancelDialog.onclick = (e) => {
    e.preventDefault()
    output.innerHTML = ""
    dialog.close()
  }
  form.onsubmit = (e) => {
    e.preventDefault();
    [username, password] = [inputUsername.value, inputPassword.value]
    output.innerHTML = `<pre>${JSON.stringify({username, password})}</pre>`
    dialog.close()
  }
</script>

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.