介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; script src=https://www.yisu.com/zixun/" js/jquery-1.11.1.js ">
<标题>弹窗效果
<时尚>
*{保证金:0;填充:0;list-style:没有}
.mask {background: rgba (0, 0, 0, 0.2);宽度:100%;高度:100%;位置:固定;最高:0;左:0;}
.prompt_box{宽度:400 px;高度:200 px;背景:# ffffff; border - radius: 6 px;
位置:固定;:25%;左:50%;margin-left: -200 px;溢出:隐藏;}
.prompt_box .prompt_title{高度:40 px;行高:40 px; padding-left: 20 px;边界底部:2 px固体# 1 a9ebf;背景:# e6e6e6;位置:相对;}
.prompt_box .prompt_title h4{字体大小:16 px;颜色:# 333333;margin-top: 0;}
.prompt_box .prompt_cancel{宽度:24 px;高度:24 px;背景:url (“img/cancel.png”)不再重演;位置:绝对;右:0;:0;}
.prompt_box .prompt_cont{位置:相对;高度:158 px;}
.prompt_box .prompt_cont .prompt_text{行高:140 px; padding-left: 100 px;}
.prompt_box .prompt_cont .prompt_sure{:绝对;右:20 px;底:34 px;
宽度:50 px;高度:26 px;背景:# 1 a9ebf; border - radius: 5 px;颜色:# ffffff;
字体大小:14 px;行高:26 px; text-align:中心;}
hide{显示:没有;}
,告诉{显示:块;}> 头
<身体>
<>脚本
$(函数(){
(函数(){//////////////////////////弹窗效果////////////////////////////////$ (" # btn”)。点击(函数(){
$ (' .prompt_text ')。text(“输入有误,请重新输入!”);
$ (' .mask ') .removeClass(隐藏的);
})
$ (' .prompt_sure, .prompt_cancel”)。点击(函数(){
$ (' .mask ') .addClass(隐藏的);
})
}) ();
});>
这篇文章主要介绍了jquery如何实现弹窗效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
本文实例为大家分享了jquery实现系统提示框的具体代码,供大家参考,具体内容如下
系统提示
输入有误,请重新输入!
确定