JS 提示弹出框

最新推荐文章于 2023-09-18 09:52:39 发布

尘埃338

最新推荐文章于 2023-09-18 09:52:39 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： JS

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

tml xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dialog提示弹出框</title>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.ui.js"></script>  //引入jQueryUI样式来辅助
<script type="text/javascript" src="ethanDialog.js"></script>
<link href="ethanDialog.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="ethan_dialog">
<a class="a1" href="#">提示更新成功(URL)</a>
<a class="a2" href="#">提示内容加载</a>
<a class="a3" href="#">提示输入有误</a>
<a class="a4" href="#">提示更新失败</a>
</div>

//下面是四个提示弹出框的模块
<div class="ethan_success">
<span>更新成功</span><br/>
<img src="images/success.png" class="ethan_img">
</div>
<div class="ethan_loading">
<span>内容加载</span><br/>
<img src="images/loading.gif" class="ethan_img">
</div>
<div class="ethan_warning">
<span>输入有误</span><br/>
<img src="images/warning.png" class="ethan_img">
</div>
<div class="ethan_error">
<span>更新失败</span><br/>
<img src="images/error.png" class="ethan_img">
</div>
</body>
</html>
复制代码
 

 第二步：编写css文件

复制代码
html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.a1,.a2,.a3,.a4{
    display:block; 
    width:300px; 
    height:35px; 
    line-height:35px; 
    background-color:green; 
    color:#red; 
    text-decoration:none; 
    text-align:center; 
    border-radius:8px;
    margin:10px auto 0;
}


.ethan_success,.ethan_loading,.ethan_warning,.ethan_error{
    background : lightblue;
    text-align:center; 
}
.ethan_success,.ethan_loading,.ethan_warning,.ethan_error  span{
    line-height :25px;
    font-size: 14px;
    font-weight : bold;
    color : green;
}
.ethan_success .ethan_img{
    margin-top : 20px;
}

.ethan_loading .ethan_img{
    margin-top : 0px;
}
.ethan_warning .ethan_img{
    margin-top : 20px;
}
.ethan_error .ethan_img{
    margin-top : 20px;
}
复制代码
css的样式都很简单 就不多说了

第三步：编写js代码文件

复制代码
/**
 * 名称：EthanCoco原创弹出对话框提示层插件ethanDialog
 * 语言：jQuery，jQueryUI辅助
 * 作者：EthanCoco
 * 博客：http://www.cnblogs.com/jianyeLee/
 * 日期：2015-08-15
 */

//养成好的习惯，在写jQuery代码的时候，记得最好在前面加个“分号”
;$(function(){

　　//当点击class为a1的时候，执行 $('.ethan_success').dialog('open');把提示框打开，
　　// setTimeout（）是设置时间的
    $('#ethan_dialog .a1').click(function(){　　//当点击的时候，
        $('.ethan_success').dialog('open');　　//打开dialog对话框
        setTimeout(function(){ //当时间为2秒的时候，关闭对话框，并跳转指定的页面
            $('.ethan_success').dialog('close');
            window.location.href='http://www.cnblogs.com/jianyeLee/';
            },2000);
    });
    $('#ethan_dialog .a2').click(function(){
        $('.ethan_loading').dialog('open');
        setTimeout(function(){
            $('.ethan_loading').dialog('close');
        },2000);
    });
    $('#ethan_dialog .a3').click(function(){
        $('.ethan_warning').dialog('open');
        setTimeout(function(){
            $('.ethan_warning').dialog('close');
        },2000);
    });
    $('#ethan_dialog .a4').click(function(){
        $('.ethan_error').dialog('open');
        setTimeout(function(){
            $('.ethan_error').dialog('close');
        },2000);
    });    
    
    
    
    /**
 * @Description 初始化弹出对话框层
 * @author EthanCoco
 * @Date 2015-08-15
 * @param className 样式名称（成功：ethan_success，加载：ethan_loading，警告：ethan_warning，失败：ethan_error） 
 */
    $('.ethan_success,.ethan_loading,.ethan_warning,.ethan_error').dialog({
        autoOpen : false, 
        modal : true,
        closeOnEscape : false,
        resizable : false,
        draggable : false,
        hide: 'blind',
        width : 200,
        height : 100,
    }).parent().find('.ui-widget-header').hide();  　　//这个parent().find('.ui-widget-header').hide();需要一点技巧，下面介绍一下
    
});

尘埃338

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 提示弹出框

tml xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;dialog提示弹出框&lt;/title&gt;&lt;script type="text/javas
复制链接

扫一扫