本消息框需要 jQuery 库的支持
CSS 代码:
- /* 弹窗的主体 */
- .ta_main{
- width: 100%;
- height: 100%;
- background: rgb(57,154,254,0);
- position:absolute;
- z-index: 99999;
- top:0;
- display: none;
- padding: 0;
- margin: 0;
- }
- /* 弹窗的本身 */
- .ta{
- width: 300px;
- height: 200px;
- position: absolute;
- left:50%;
- top:50%;
- margin-left: -150px;
- margin-top: -100px;
- }
- /* 弹窗上标题栏 */
- .ta_top{
- width: 100%;
- height: 30px;
- background: #dfdfdf;
- line-height: 30px;
- }
- /* 弹窗中心内容位置 */
- .ta_bottom{
- width: 100%;
- height: 40px;
- position:absolute;
- bottom:0;
- line-height: 40px;
- background: #fff;
- }
- /* 弹窗按钮位置 */
- .ta_bottom1{
- width: 100%;
- height: 40px;
- background: #fff;
- position:absolute;
- bottom:0;
- line-height: 40px;
- }
- .ta_midd{
- width: 100%;
- height: 130px;
- background: #fff;
- position: absolute;
- top:30px
- }
- .ta_close_btn{
- width: 20px;
- height: 20px;
- border: none;
- float: right;
- margin-right: 10px;
- color: #399afe;
- font-size: 20px;
- background: #dfdfdf;
- }
- .ta_close_btn:hover{
- color: #fff;
- background: #dfdfdf;
- }
- .ta_queding_btn{
- width: 100px;
- height: 30px;
- border-radius: 15px;
- background: #FFf;
- color: #399afe;
- border: solid 1px #399AFE;
- position: absolute;
- left:50%;
- top:5px;
- margin-left: -50px;
- }
- .ta_queding_btn:hover{
- background: #399AFE;
- color: #fff;
- }
- .ta_btn{
- width: 50px;
- height: 30px;
- border-radius: 15px;
- background: #FFf;
- color: #399afe;
- border: none;
- border: solid 1px #399AFE;
- margin: 0 10px;
- }
- .ta_btn:hover{
- color: #fff;
- background: #399AFE;
- }
- .ta_text{
- width: 250px;
- height: 60px;
- position: absolute;
- left:50%;
- top:60px;
- margin-left: -125px;
- }
- .ta_midd img{
- width: 150px;
- height: 50px;
- position: absolute;
- left:50%;
- top:5px;
- margin-left: -75px;
- }
- .ta_ico{
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-top:10px;
- color: #399AFE;
- text-align: center;
- font-size: 40px;
- line-height: 40px;
- }
- .ta_txt{
- width: 200px;
- height: 30px;
- position: absolute;
- top:15px;
- left:50px;
- line-height: 30px;
- font-size: 9pt;
- color: #989898;
- text-align: center;
- -webkit-user-select:none;
- -moz-user-select:none;
- -ms-user-select:none;
- user-select:none;
- }
JavaScript 代码:
- function init_taichuan(){
- $("body").append("<p class='ta_main'><p class='ta'><p class='ta_top'><button class='ta_close_btn'id='ta_close_btn'><i class=' fa fa-remove'></i></button></p><p class='ta_midd'><img src='img/1.jpg'id='ta_logo'/><p class='ta_text'><p class='ta_ico'><i class='fa fa-thumbs-up'id='ta_ico'></i></p><p class='ta_txt'></p></p></p><p class='ta_bottom'><button class='ta_btn'style='margin-left: 90px;'id='ta_queren2'>确定 </button><button class='ta_btn'id='ta_quxiao'> 取消 </button></p><p class='ta_bottom1'><button class='ta_queding_btn'id='ta_queren'> 确定</button></p></p></p>")
- }
- init_taichuan()// 初始化窗口
- // 消息窗口的确认按钮
- function queren1(fun){
- $('#ta_queren').on('click',fun) ;
- }
- // 确认窗口的确认按钮
- function queren2(fun){
- $('#ta_queren2').on('click',fun);
- }
- // 确认窗口的取消按钮
- function quxiao(fun){
- $('#ta_quxiao').on('click',fun) ;
- }
- // 窗口关闭按钮
- $('#ta_close_btn').on('click',function(){
- $('.ta_main').fadeOut()
- });
- // 窗口的样式
- /**
- *
- * @param {Object} ico 第三方图标库图标类名
- * @param {Object} txt 窗口上提示的内容
- * @param {Object} type 窗口的类型[空字符串为消息框]
- * @param {Object} logo 窗口的显示的图像路径
- */
- function taichuan(ico,txt,type,logo){
- if(type!=''){
- $('.ta_bottom1').hide()
- }else{
- $('.ta_bottom').hide()
- }
- $('#ta_ico').removeClass('fa-thumbs-up');
- $('#ta_ico').addClass(ico);
- $('.ta_txt').text(txt);
- $('#ta_logo').attr('src',logo)
- }
- taichuan('fa-yen','gggggg','2','img/m3.jpg');
- quxiao(function(){alert('123')});
- queren1(function(){alert('456')});
- queren2(function(){alert('789')});
来源: https://www.2cto.com/kf/201805/746130.html