artDialog——经典、优雅的网页对话框控件

对于弹窗，之前用的比较多的就数layUI的了，今天对比了几款弹窗（artdialog、jBox、sweetalert），最后还是选择了artDialog。为什么要单独找对话框插件呢？因为老的项目里面用的是layer，然后也没有封装，页面里面弹窗多的话，页面显得特别乱，这次新项目，打算找一个相对友好一点的插件，刚好artDialog基本满足了需求，就拿来借鉴了下。选用它的优点在于，比较贴合需求，弹窗信息较多时，弹窗会自动更改大小，这个自适应就很好用。

使用也非常简单，直接引入一个单独的js就搞定了，自定义的话，可以直接修改源码，我这里就是在原来的基础上简单修改了一下样式，这里记录一下修改的过程：

首先是artDialog源码，github地址为：https://github.com/aui/artDialog

文档也很详细：http://aui.github.io/artDialog/doc/index.html

这里对比下修改前后的样式：

普通对话框修改前：

修改后：

带按钮的模态对话框：


首先简单使用的话，直接引入js即可：

   <script type="text/javascript" src="/common/artDialog/dialog.js"></script>

		//不带按钮的
        function test3() {
            var d = dialog({
                title: '欢迎',
                content: '欢迎使用 artDialog 对话框组件！'
            });
            d.showModal();
        }
		
		//带按钮的
       function test4(){
           var d = dialog({
               title: '提示信息',
               content: '我是提示内容',
               okValue: '确定',
               ok: function () {
                   //this.title('提交中…');
                   var d = dialog({
                       title: '提示信息',
                       //content: '欢迎使用 artDialog 对话框组件！'
                       content: '欢迎使用 artDialog 对话框组件！<p>您点击了确认按钮！'
                   });
                   d.show();
                   //return false;
               },
               cancelValue: '取消',
               cancel: function () {}
           });

           //d.show();
           d.showModal();
       }
		
		//超长提示信息，可添加<p> 自动换行
       function test41(){
           var d = dialog({
               title: '提示信息',
               content: '' +
                   '按钮回调函数返回 false 则不许关闭<p>按钮回调函数返回 false 则不许关闭<p>' +
                   '按钮回调函数返回 false 则不许关闭11111111111111111111111<p>按钮回调函数返回 false 则不许关闭<p>' +
                   '按钮回调函数返回 false 则不许关闭<p>按钮回调函数返回 false 则不许关闭',
               okValue: '确定',
               ok: function () {
                   //this.title('提交中…');
                   var d = dialog({
                       title: '提示信息',
                       //content: '欢迎使用 artDialog 对话框组件！'
                       content: '欢迎使用 artDialog 对话框组件！<p>您点击了确认按钮！'
                   });
                   d.show();
                   //return false;
               },
               cancelValue: '取消',
               cancel: function () {}
           });
           //d.show();
           d.showModal();
       }

在js里面定义按钮去执行弹窗：

<button class="preview" id="test" onclick="test3()">Showing-an-alert3</button>
<button class="preview" id="test" onclick="test4()">Showing-an-alert4</button>
<button class="preview" id="test" onclick="test41()">Showing-an-alert41</button>

下面是改源码，在改源码的过程中发现，sweetalert支持页面自定义样式，可以直接覆盖源码里面的样式，而artDialog则不行，在页面里面定义样式时，不生效，仍然是原来的样式，所以最后才开始倒腾改源码。

首先页面弹窗分为三大块：header，body，footer

可以看到其中header里面包含了：title和close

body里面原本只有一个content，我这里加了一个myIcon的div，用来显示一个感叹号。

footer里面包含了一个button的div。

注意上面各个元素的class属性，这里就是我们需要修改的样式。

下面将js中拼接的主题内容HTML代码copy出来：

<div i="dialog" class="ui-dialog">
	<div class="ui-dialog-arrow-a"></div>
	<div class="ui-dialog-arrow-b"></div>
	<table class="ui-dialog-grid">
		<tr>
			<td i="header" class="ui-dialog-header">
				<button i="close" class="ui-dialog-close">&#215;</button>
				<div i="title" class="ui-dialog-title"></div>
			</td>
		</tr>
		<tr>
			<td i="body" class="ui-dialog-body">
				<div i="myIcon" class="ui-dialog-content ui-dialog-myIcon">
					<img src="/images/yhgf/tips_icon5_l.png" alt="">
				</div>
				<div i="content" class="ui-dialog-content"></div>
			</td>
		</tr>
		<tr>
			<td i="footer" class="ui-dialog-footer">
				<div i="statusbar" class="ui-dialog-statusbar"></div>
				<div i="button" class="ui-dialog-button"></div>
			</td>
		</tr>
	</table>
</div>

通过在文件内部搜索上面HTML代码块的class属性，可以找到对应的css样式，可直接修改，要注意，这里面修改的是弹窗全局的css。

本来打算把修改后的源码给粘贴上呢，但是内容有点多，这里贴一下github地址：artDialog.js

sweetalert ：
github地址：https://github.com/t4t5/sweetalert
api文档：https://sweetalert.js.org/guides/#showing-an-alert
jBox：
github地址： https://github.com/StephanWagner/jBox
Demo: https://stephanwagner.me/jBox
Docs: https://stephanwagner.me/jBox/documentation
如果感觉上面这三款比较麻烦或者不够友好，可以使用国产弹窗插件layer
https://github.com/sentsin/layer
https://layer.layui.com/