jQuery模态框原理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!-- 引入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>