srk srk -4 years ago 68
HTML Question

Pop up a form when a button is clicked

I want a form to appear in the center of the page when a button is clicked. I found a solution at
But can it be done in a simpler way without having to include jqueryui?

Also, how i can make the background fields unaccessible? i.e, when the form is open, background fields should be visible but I shouldn't be able to interact with them.

Answer Source

Create a hidden form, then on click of a button toggle the form using .show() and .hide()

$('#show').on('click', function () {

$('#close').on('click', function () {
.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

.hideform {
    display: none;
<script src=""></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <input type="submit" value="Submit">
<button id="show">Show form</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download