《kendoWindow》使用kendoWindow实现自定义的confirm验证

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，再也不用忍受原生样式的丑陋啦。