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、查看效果。