简单的弹出框DEMO

--CSS--

.del_dialog{
    position: absolute;z-index: 33;width: 200px;height: 135px;background: #fff;margin-left: 22%;margin-top: 25%;border-radius: 3px;display: none;
          }
.del_dialog .dialog_title{
    height: 35px;line-height: 35px;font-size: 18px;padding-left: 15px;background: #dff0d8;font-family: 800;border-radius: 3px 3px 0 0;
            }

.dialog_content{
    height: 70px;padding: 10px;font-size: 16px;
            }
.dialog_operation{
border-top: 1px solid #f8f8f8;height: 30px;line-height: 30px;font-size: 16px;display: -webkit-box;text-align: center;
}
.dialog_operation div{
width: 50%;
}

--HTML--

<div class="del_dialog">
<div class="dialog_title" >删除</div>
<div class="dialog_content" >是否要删除全部订单</div>
<div class="dialog_operation" >

                      <div onclick="delAllOrder()" style="background: #ff6666;color:#fff;border-radius: 0 0 0 3px">确定</div>

                      <div onclick="quitDelDiialog();">取消</div>

               </div>

</div>