jQuery点击弹出确认删除对话框

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代艨位雅剖码。<table class="z_i"><tr class="i0"> <td width="20%">部门</td> <td width="35%">工号</td> <td width="30%">姓名</td> <td width="15%">操作</td></tr><tr class="i1"> <td width="20%">设计部</td> <td width="35%">001</td> <td width="30%">陈丹</td> <td width="15%"><a href="#" class="del">删除</a></td></tr><tr class="i2"> <td width="20%">产品部</td> <td width="35%">002</td> <td width="30%">张静</td> <td width="15%"><a href="#" class="del">删除</a></td></tr><tr class="i3"> <td width="20%">研发部</td> <td width="35%">003</td> <td width="30%">李伟</td> <td width="15%"><a href="#" class="del">删除</a></td></tr></table>

4、书写css代码。.z_i { width: 900px; text-align: center; margin: 0 auto; border-collapse: collapse; background: #fff; line-height: 49px; margin-top: 60px; border: 1px solid #e8e8e8; }.z_i td a { color: #18a0da; }.z_i td { height: 49px; font-size: 12px; color: #4b4b4b; }.z_i .z_title { border-bottom: none; height: 30px; }.z_i .z_title td { height: 30px; background: #dfeef5; }.z_i tr { border: 1px solid #CCC; }.mod-dialog-bg { background: #000; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1000; }.mod-dialog { background-color: #fff; border-top: none; min-width: 400px; *padding-top: 27px;position: absolute; z-index: 1001; min-height: 190px; margin-top: -20px; }.mod-pop { background: #fff; border: solid 1px #a1a1a1; box-shadow: 0 0 5px #a1a1a1; box-shadow: 0 0 5px #a1a1a1; font-size: 14px; height: 142px; position: absolute; width: 276px; z-index: 1000; }.clearfix_new:after { clear: both; content: '\20'; display: block; height: 0; }.mod-dialog .dialog-nav { color: #fff; font-weight: 700; font-size: 12px; font-family: "\5b8b\4f53"; height: 27px; *left: 0;line-height: 27px; *position: absolute;*top: -27px;*width: 100%;}.mod-dialog .dialog-title { padding-left: 10px; }.mod-dialog .dialog-close { background: url(images/close.png) no-repeat 0 0; height: 12px; position: absolute; right: 10px; top: 10px; width: 12px; }.mod-dialog .dialog-main { font-size: 14px; padding: 20px; text-align: center; }.dialog-main .dialog-content p { color: #7e7e7e; }.mod-dialog .dialog-content { font-size: 14px; line-height: 24px; }.mod-dialog .dialog-console { padding-top: 50px; }.mod-pop .pop-nav { background: #f3f3f3; color: #666; font-weight: 700; line-height: 31px; padding: 0 10px; }.mod-pop .pop-close { background: url(images/close.png) no-repeat -109px 0; height: 22px; position: absolute; right: 6px; top: 6px; width: 22px; }.mod-pop .pop-main { line-height: 24px; padding: 15px 10px 10px; text-align: center; }.mod-pop .pop-console { font-size: 16px; line-height: 38px; margin-top: 20px; text-align: center; }.mod-pop .pop-btn-green { background: url(images/close.png) no-repeat 0 -24px; color: #fff; display: block; float: left; height: 36px; margin-right: 16px; width: 120px; }.mod-pop .pop-btn-gray { background: url(images/close.png) no-repeat 0 -62px; color: #999; display: block; float: left; height: 36px; width: 120px; }.mod-fixed-console.console-fixed { box-shadow: 0 0 5px 2px rgba(0,0,0,0.3); position: fixed; top: 10px; z-index: 999; }

5、书写并添加js代码。<script src="js/jquery-1.4.4.min.js"></script><script src="js/qikoo.js"></script>

6、代码整体结构。

7、查看效果。