一款jQuery弹窗的美化版插件,一共有9种弹窗的效果可供选择,有带标题的、带图标的、带按钮的,还有直接弹窗打开页面的,样式效果都可以自由调整。
页面的head部分,需引入页面元素的样式文件、jQuery库和必要的JS文件,简单演示元素的样式,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<style type="text/css">
.alert {
width: 90%;
text-align: center;
color: #fff;
margin: 10px auto;
border-radius: 5px;
line-height: 30px;
cursor: pointer;
background: #4ab819;
}
.confirm {
background: #196fb8;
}
.open {
background: #f88408;
}
.toast {
background: #f80851;
}
.later {
background: #a9a9a9;
}
</style>
页面的body部分,需将不同的弹窗放入相应的div容器里,代码如下:
<div class="alert" onclick="mizhu.alert('alert_带标题', '这是alert效果');">alert_带标题</div>
<div class="alert" onclick="mizhu.alert('', '这是alert效果','alert_red');">alert_带图标</div>
<div class="alert" onclick="mizhu.alert('alert_带标题带图标', '这是alert效果','alert_green');">alert_带标题带图标</div>
<div class="alert" onclick="mizhu.alert('', '这是alert效果');">alert_无标题无图标</div>
<!--=============================================================================================================-->
<div class="alert confirm" onclick="_confirm1()">confirm_无标题</div>
<div class="alert confirm" onclick="_confirm2()">confirm_带标题</div>
<!--=============================================================================================================-->
<div class="alert open" onclick="mizhu.open(600, 400, '素材火', 'http://www.sucaihuo.com');">iframe弹出网站</div>
<!--=============================================================================================================-->
<div class="alert toast" onclick="mizhu.toast('已取消关注');">toast_默认3秒消失</div>
<div class="alert toast" onclick="mizhu.toast('已取消关注', 6000);">toast_自定义时间(6秒)</div>
<!--=============================================================================================================-->
<div class="alert later">不定时更新</div>
页面的底部,设置好对话框的响应内容,代码如下:
function _confirm1() {
mizhu.confirm('', '是否要取消关注?', function(flag) {
if(flag) {
mizhu.alert('', '取消成功');
}
});
}
function _confirm2() {
mizhu.confirm('温馨提醒', '是否要取消关注?', function(flag) {
if(flag) {
mizhu.alert('', '取消成功');
}
});
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791