html5+CSS3点击弹出弹窗删除
1、新建html文档。
2、书写hmtl代码。
<div class="demo1">
<ul>
<li>1（点击删除）</li>
<li>2（点击删除）</li>
<li>3（点击删除）</li>
<li>4（点击删除）</li>
<li>5（点击删除）</li>
</ul>
</div>
<div class="pop">
<div class="popMain">
<div class="popTop"></div>
<div class="popMiddle">
是否确认删除？
</div>
<div class="popBottom"> <span class="confirm">确认</span> <span class="cancel">取消</span> </div>
</div>
</div>
3、书写css代码。
<style>
* { margin: 0; padding: 0; }
body, html { font-family: "微软雅黑"; }
.demo1 { width: 1000px; margin: 100px auto 50px; }
.demo1 ul { overflow: hidden; }
.demo1 ul li { float: left; padding: 10px 20px; font-size: 18px; color: #fff; background-color: #000; border-radius: 3px; margin-right: 20px; cursor: pointer; }
.pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); }
.pop .popMain { width: 600px; min-height: 300px; background: #fff; position: absolute; left: 50%; top: 30%; margin-left: -300px; }
.popMiddle p { text-align: center; font-size: 18px; color: #666; padding: 90px 0; }
.pop .popBottom { position: absolute; bottom: 0; left: 0; display: flex; width: 100%; height: 80px; text-align: center; background: #488ACC; }
.pop .popBottom span { flex: 1; text-align: center; font-size: 24px; color: #fff; line-height: 80px; cursor: pointer; }
.pop .popBottom span:first-of-type { border-right: 1px solid #fff; }
</style>
4、书写并添加js代码。
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
(function(){
var num;
$(".demo1").on('click', 'ul li', function(event) {
event.preventDefault();
num = $(this).index();
$(".pop").fadeIn('fast');
});
$(".popBottom").on('click', 'span', function(event) {
event.preventDefault();
if($(this).hasClass('confirm')){
$(".demo1 ul li").eq(num).remove();
num = "";
$(".pop").fadeOut();
}else{
$(".pop").fadeOut();
num = "";
}
});
})();
});
</script>
5、代码整体结构。
6、查看效果。
