jQuery练习-01-自定义对话框

一、效果图

效果视频
https://www.bilibili.com/video/BV1SC4y1h7qX/
二、思路部分
首先，做出基本的布局样式，将CSS样式写出，封装到CSS文件里
其次，将提示布局写出，将CSS样式和界面布局分别分装到CSS和JS文件里，这里我写了5个，如图所示

三、功能实现部分：
根据演示效果：按一个按钮，提示框出现，根据你按的是取消或者确认，在“尚未操作”文本那里，会变成别的文本。用jQuery写出功能，如图所示：
其他操作： (function($){})(window.jQuery)：匿名函数与自执行
$confirm: 提示界面布局（ES6写法）
$.otherAction：添加一个对象，在里面创建带有回调函数的confirm方法
confirm：1、将界面放到htmlbody中并显示
2、监听取消事件
如果有回调函数，就执行这个回调函数
然后隐藏界面
3、监听确认事件
如果有回调函数，就执行这个回调函数
然后隐藏界面
$confirm: 提示界面布局
$.loadAction：添加一个对象，在里面创建confirm方法
confirm：1、将这个界面放到html的body当中并且显示
2、监听界面的点击状态，如果点击，就隐藏

还有几个都差不多，这里放图：


html：
第一张，不多说，各种CSS文件和JS文件的导入，还有原始界面的布局
第二张：
用jQuery来写JS脚本，实现功能：
1、监听删除按钮事件：
调用对象deleteAction的confirm方法，
带有回调函数：
指定需要改写的文本域的文本

2、3、4、5同上