jquery - 单击按钮时弹出一个表单

Question

我希望在单击按钮时在页面中央显示一个表单。我在 http://jqueryui.com/dialog/#modal-form 找到了解决方案. 但是可以不用包含 jqueryui 以更简单的方式完成吗？

此外，如何使背景字段不可访问？即，当表单打开时，背景字段应该是可见的，但我不应该能够与它们互动。

Answer 1

创建一个隐藏表单，然后单击按钮使用 .show() 切换表单和 .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>