artDialog介绍:http://www.planeart.cn/demo/artDialog/index.html
artDialog文档API链接:http://www.planeart.cn/demo/artDialog/_doc/API.html#options,上面有详细的介绍各参数的用法。
下面是一个简单的例子,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>artDialog简单例子</title>
<link type="text/css" href="../../js/artDialog/skins/default.css"
rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../../js/artDialog/artDialog.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
#testDiv {
width: 900px;
margin: 0 auto;
border: 1px solid #f4f4f4;
}
#contentDiv {
width: 100%;
text-align: center;
}
#submitDiv {
width: 100px;
padding: 20px 0;
text-align: center;
margin: 0 auto;
text-align: center;
}
#submitDiv span {
color: #fff;
background: #89D900;
height: 25px;
width: 100px;
display: block;
line-height: 25px;
font-weight: bold;
}
#submitDiv a {
text-decoration: none;
}
input {
height: 20px;
line-height: 20px;
margin-bottom: 6px;
width: 200px;
}
select {
height: 24px;
line-height: 20px;
padding: 2px 0;
margin-bottom: 6px;
}
.leftpadding {
padding-left: 23px;
}
.fixwidth {
width: 200px;
}
</style>
<script>
function artDialogTest(iconType,varTitle, content) {
if(iconType==''){
iconType='succeed';
}
var dialog = art.dialog({
title : varTitle,
content : '<p style="font-size:16px;">' + content + '</p>',
cancel: false,
drag:false,
icon : iconType,
button : [ {
name : '确定',
callback : function() {
this.close();
return false;
},
focus : true
} ]
});
}
$(function() {
$('#submitBtn').on('click', function() {
var varIcon = $('#icon_select').find("option:selected").val();
var varTitle = $('#title_input').val();
var varContent = $('#content_input').val();
artDialogTest(varIcon,varTitle, varContent);
});
});
</script>
</head>
<body>
<div id="testDiv">
<div id="contentDiv">
<label for="v_icon" class="leftpadding">图标类型:</label>
<select
id="icon_select" placeholder="请选择" class="fixwidth">
<option value="" disabled selected style='display: none;'>请选择</option>
<option value="succeed">成功</option>
<option value="error">错误</option>
<option value="loading">加载</option>
<option value="warning">警告</option>
<option value="question">疑问</option>
</select> <br />
<label for="v_title">弹出层标题:</label>
<input type="text" id="title_input" name="title_input" /><br />
<label for="v_content">弹出层内容:</label>
<input type="text" id="content_input" name="content_input" /><br />
</div>
<div id="submitDiv">
<a id="submitBtn" href="javascript:void(0);"> <span>点击弹出框</span></a>
</div>
</div>
</body>
</html>
运行结果如下:
全文完。