CODEWITHSUNDEEP
javascripthtmlcss
Neetu Pant
Neetu Pant

Reputation: 53

popup form using html/javascript/css

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....

Upvotes: 5

Views: 111590

Answers (7)

Carson
Carson

Reputation: 7968

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>

Upvotes: 0

Rahul Jain
Rahul Jain

Reputation: 658

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

Upvotes: 0

mplungjan
mplungjan

Reputation: 177795

Please try jQuery UI dialog

Here is the forms demo

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

Upvotes: 19

Loktar
Loktar

Reputation: 35309

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

Upvotes: 17

sunil_mlec
sunil_mlec

Reputation: 680

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

Upvotes: 0

Venkat Raghavan G
Venkat Raghavan G

Reputation: 33

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.

Upvotes: -1

Quentin
Quentin

Reputation: 943250

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.

Upvotes: 1

Related Questions