单击按钮时弹出一个表单

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>