popup form using html/javascript/css

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.