jQuery模态框原理

<!-- 引入jQuery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>



<!-- 准备一个将要展示的<div>，它的默认状态为隐藏（display: none） -->
<div id="model" style="display: none">
    姓名：<input type="text">
    年龄：<input type="text">
</div>


<!--  准备一个按钮<button>  -->
<button id="btn">弹出</button>


<!--  点击按钮之后，将隐藏的<div>的display属性改为显示（display: block）  -->
<script>

    // 找到id为btn的按钮，触发点击事件
    $('#btn').click(function(){

        // 将id为model的display属性改为block
        $('#model').css({"display": "block"});
    });

</script>