2018/8/22更新:
内容明日更
————————————————————————分割线————————————————————————————
项目中需要用到类似于window.confirm的方法,原生的样式实在是太丑。。。而项目中前端的UI框架只有kendoUI和bootstarp,因为之前的控件都使用了kendoUI的样式,所以出于风格一致性的考虑,觉得使用kendoUI的样式,第一时间想到的是dialog控件,查阅官方文档确实也有,但不知道为何在项目中无法使用,或许是版本太低,或许是框架组禁用了这个控件。于是想到了之前用到过的kendoWindow刚好有些类似,就尝试着做一下。
首先是弹出的window中的内容:
<div id="delete-confirm" style="display: none">
<div class="modal-content k-dialog-confirm k-window-content k-content"
data-role="dialog" tabindex="0">
<div class="modal-body" style="">
<table>
<tbody>
<tr>
<td width="54">
<span class="fa fa-question-circle"></span>
</td>
<td>确定删除?</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button id="onOK" class="btn btn-primary">确定</button>
<button id="onCancel" class="btn btn-default">取消</button>
</div>
</div>
绑定kendoWindow:
$("#delete-confirm").kendoWindow({
draggable: false,
modal: true,
resizable: false,
title: '确认删除',
width: 400,
});
窗体中的按钮绑定click事件:
$("#onOK").click(function () {
dataSource.remove(data[0]);
dataSource.sync();
window.close();
});
$("#onCancel").click(function () {
window.close();
});
大功告成~
今后可以用这种方式,自定义confirm,再也不用忍受原生样式的丑陋啦。