求大牛指点,如何用jquery动态创建模态层,并在页面上点击任意位置删除模态层

这是我的代码
<!DOCTYPE html>




Title
<br> *{<br> margin: 0;<br> padding: 0;<br> }<br> html,body{<br> width: 100%;<br> height: 100%;</p> <pre><code> } .box{ width: 100px; height: 100px; background: #7e7e7e; } .modal{ width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,.3); top:0; left:0; } .on{ position: absolute; top: 50%; left: 50%; width: 250px; height: 150px; margin-left: -150px; margin-top: -100px; background: #FFFFFF; } p{ font-size: 18px; height: 50px; line-height: 50px; text-align:center; } button{ width: 100px; height: 50px; margin-left: 75px; margin-top: 10px; } &lt;/style&gt; </code></pre> <p></head><br> <body></p> <div class="box"></div> <!------------------------------------------------- <div class="modal"> <div class="on"> <p class="pic">图片不清晰</p> <button>关闭</button> </div> </div> ---------------------------------------------------> <p></body></p> <script> var $modal = $( '<div class="modal">'+ '<div class="on">'+ '<p class="pic">图片不清晰</p>'+ '<button>关闭</button>'+ '</div>'+ '</div>' ); var $hide = $('.modal'); $('.box').click( function(){ $('body').append($modal); }); </script> <p></html></p>

1个回答

对于这种可以利用jquery弹窗组件dialog,具体参考官方文档

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问