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 http://jqueryui.com/dialog/#modal-form.
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 () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})
.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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>

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