自定义弹出框

最新推荐文章于 2021-05-31 09:21:04 发布
转载 最新推荐文章于 2021-05-31 09:21:04 发布 · 373 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/yxmBetter/blog/1083027
文章标签：

#xhtml #javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

很多时候都用到弹出框，但是样式不太好，怎样设置呢？直接放代码，拿走不谢~~（也是从别处copy来的，总结一下好用）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js alert confirm样式弹出框 - 站长素材</title>
<link type="text/css" rel="stylesheet" href="css/showBo.css" />
<script type="text/javascript" src="js/showBo.js"></script>
</head>
<body >
<div id="wrap">
	<div class="box-163css">
		<input type="button" value="Showbo.Msg.alert" onclick="Showbo.Msg.alert('您好，请先注册或登录!')">
		<input type="button" value="Showbo.Msg.confirm" onclick="Showbo.Msg.confirm('您确定删除这条记录吗？')">
	</div>
</div>

</body>
</html>



.box-163css{ width:350px; margin:220px auto; position:relative;}
.box-163css input{ margin-left:10px; border:none; border:1px solid #a10000; background:#c00; text-align:center; height:24px; line-height:20px; color:#fff; cursor:pointer;}
#dvMsgBox{display:none;position:absolute;font-size:12px;width:300px;overflow:hidden;z-index:999; border-radius:3px; font-family:微软雅黑;}  
#dvMsgBox .top{height:40px; background-color:#72D1FF;padding-left:16px; float:left; width:100%;}  
#dvMsgBox .top .right{height:100%;padding-right:6px;}  
#dvMsgBox .top .right .title{height:100%;line-height:40px;color:#fff;vertical-align:middle;font-size:14px;overflow:hidden;}  
#dvMsgBox .body{background:#fff;padding-left:10px;}  
#dvMsgBox .body .right{background:#fff;padding-right:2px;}  
#dvMsgBox .body .right .ct{  line-height: 60px;
  vertical-align: middle;
  width: 100%;
  text-align: center;
  color:#2b9bc5;
  font-size: 14px;}  
#dvMsgBox .body .right .ct .pro{width:280px;border:solid 1px #6593cf;height:25px;background:#ffffff;line-height:23px;overflow:hidden;}  
#dvMsgBox .body .right .ct .pro .bg{width:0%;height:100%;background:#c9dffc;}  
#dvMsgBox .bottom{background:#fff;padding-left:6px;}  
#dvMsgBox .bottom .right{height:100%;/*background:transparent url(right-corners.png) no-repeat right bottom;*/padding-right:6px;}  
input.btn{width:56px;   border-radius: 3px; font-family:微软雅黑; cursor:pointer; color:#fff; border:none; height:25px; text-align:center;  background-color:#72D1FF;text-align:center; margin:0px auto;}  
input.btnfocus{ background-color:#EC6D51; font-family:微软雅黑;   border-radius: 3px;width:56px;margin:0px auto; border:none; height:25px; cursor:pointer; color:#fff;}  
#dvMsgBox .icon{width:32px;height:32px;float:left;margin-right:10px;}  
#dvMsgBox .error{background:url(icon-error.gif) no-repeat;}  
#dvMsgBox .info{background:url(icon-info.gif) no-repeat;}  
#dvMsgBox .warning{background:url(icon-warning.gif) no-repeat;}  
#dvMsgBox .clear{clear:both;}  
#dvMsgBox .height{height:10px;line-height:10px;}  
#ShowBolightBox{display:none;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;z-index:100;position:absolute;left:0px;top:0px;}
#dvMsgBtns{ text-align:center; width:100%;}

var Showbo={author:'showbo',homepage:'http://www.lenomC100.com'};  
//是否为ie浏览器  
Showbo.IsIE=!!document.all;  
//ie浏览器版本  
Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})();  
//按id获取对象  
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}  
//按标签名称获取对象  
//页面的高和宽******************************  
Showbo.isStrict=document.compatMode == "CSS1Compat";  
Showbo.BodyScale={x:0,y:0,tx:0,ty:0};//（x，y）：当前的浏览器容器大小  （tx，ty）：总的页面滚动宽度和高度 
Showbo.getClientHeight=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict ? document.documentElement.clientHeight :document.body.clientHeight;/*else return self.innerHeight;*/}  
Showbo.getScrollHeight=function(){var h=!Showbo.isStrict?document.body.scrollHeight:document.documentElement.scrollHeight;return Math.max(h,this.getClientHeight());}  
Showbo.getHeight=function(full){return full?this.getScrollHeight():this.getClientHeight();}  
Showbo.getClientWidth=function(){/*if(Showbo.IsIE)*/return Showbo.isStrict?document.documentElement.clientWidth:document.body.clientWidth;/*else return self.innerWidth;*/}  
Showbo.getScrollWidth=function(){var w=!Showbo.isStrict?document.body.scrollWidth:document.documentElement.scrollWidth;return Math.max(w,this.getClientWidth());}  
Showbo.getWidth=function(full){return full?this.getScrollWidth():this.getClientWidth();}  
Showbo.initBodyScale=function(){Showbo.BodyScale.x=Showbo.getWidth(false);Showbo.BodyScale.y=Showbo.getHeight(false);Showbo.BodyScale.tx=Showbo.getWidth(true);Showbo.BodyScale.ty=Showbo.getHeight(true);} 
//页面的高和宽******************************  
Showbo.Msg={  
    INFO:'info',  
    ERROR:'error',  
    WARNING:'warning',  
    IsInit:false,  
    timer:null,  
    dvTitle:null,  
    dvCT:null,  
    dvBottom:null,  
    dvBtns:null,  
    lightBox:null,  
    dvMsgBox:null,  
    defaultWidth:300,  
    moveProcessbar:function(){  
      var o=Showbo.$('dvProcessbar'),w=o.style.width;  
      if(w=='')w=20;  
      else{  
        w=parseInt(w)+20;  
        if(w>100)w=0;  
      }  
      o.style.width=w+'%';  
    },  
    InitMsg:function(width){  
      //ie下不按照添加事件的循序来执行，所以要注意在调用alert等方法时要检测是否已经初始化IsInit=true       
      var ifStr='<iframe src="javascript:false" mce_src="javascript:false" style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%; z-index:-1;'  
          +'filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>',  
      html='<div class="top"><div class="right"><div class="title" id="dvMsgTitle"></div></div></div>'+  
        '<div class="body"><div class="right"><div class="ct" id="dvMsgCT"></div></div></div>'+  
        '<div class="bottom" id="dvMsgBottom"><div class="right"><div class="btn" id="dvMsgBtns"></div></div></div>';  
      this.dvMsgBox=document.createElement("div");  
      this.dvMsgBox.id="dvMsgBox";  
      this.dvMsgBox.innerHTML+=html;        
      document.body.appendChild(this.dvMsgBox);  
      this.lightBox=document.createElement("div");  
      this.lightBox.id="ShowBolightBox";  
      document.body.appendChild(this.lightBox);  
      if(Showbo.IsIE&&Showbo.IEVersion<7){//加iframe层修正ie6下无法遮盖住select的问题  
        this.lightBox.innerHTML+=ifStr;  
        this.dvMsgBox.innerHTML+=ifStr;  
      }  
      this.dvBottom=Showbo.$('dvMsgBottom');  
      this.dvBtns=Showbo.$('dvMsgBtns');  
      this.dvCT=Showbo.$('dvMsgCT');  
      this.dvTitle=Showbo.$('dvMsgTitle');  
      this.IsInit=true;  
    },  
    checkDOMLast:function(){//此方法非常关键，要不无法显示弹出窗口。两个对象dvMsgBox和lightBox必须处在body的最后两个节点内  
      if(document.body.lastChild!=this.lightBox){  
        document.body.appendChild(this.dvMsgBox);  
        document.body.appendChild(this.lightBox);  
      }  
    },  
    createBtn:function(p,v,fn){  
        var btn=document.createElement("input");  
        btn.type="button";  
        btn.className='btn';  
        btn.value=v;  
        btn.onmouseover=function(){this.className='btnfocus';}  
        btn.onmouseout=function(){this.className='btn';}  
        btn.onclick=function(){  
          Showbo.Msg.hide();  
          if(fn)fn(p);  
        }  
        return btn;  
    },  
    alert:function(msg){  
      this.show({buttons:{yes:'确认'},msg:msg,title:'消息'});  
    },  
    confirm:function(msg,fn){  
      //fn为回调函数，参数和show方法的一致  
      this.show({buttons:{yes:'确认',no:'取消'},msg:msg,title:'提示',fn:fn});  
    },  
    prompt:function(labelWord,defaultValue,txtId,fn){  
      if(!labelWord)labelWord='请输入：';  
      if(!defaultValue)defaultValue="";  
      if(!txtId)txtId="msg_txtInput";  
      this.show({title:'输入提示',msg:labelWord+'<input type="text" id="'+txtId+'" style="width:200px" value="'+defaultValue+'"/>',buttons:{yes:'确认',no:'取消'},fn:fn});  
    },  
    wait:function(msg,title){  
      if(!msg)msg='正在处理..';  
      this.show({title:title,msg:msg,wait:true});  
    },  
    show:function(cfg){  
      //cfg:{title:'',msg:'',wait:true,icon:'默认为信息',buttons:{yes:'',no:''},fn:function(btn){回调函数,btn为点击的按钮，可以为yes，no},width:显示层的宽}  
      //如果是等待则wait后面的配置不需要了。。   
      if(!cfg)throw("没有指定配置文件！");  
      //添加窗体大小改变监听  
      if(Showbo.IsIE)window.attachEvent("onresize",this.onResize);  
      else  window.addEventListener("resize",this.onResize,false);  
        
      if(!this.IsInit)this.InitMsg();//初始化dom对象  
      else this.checkDOMLast();//检查是否在最后  
        
      //检查是否要指定宽，默认为300  
      if(cfg.width)this.defaultWidth=cfg.width;  
      this.dvMsgBox.style.width=this.defaultWidth+'px';  
      //可以直接使用show方法停止为进度条的窗口  
      if(this.timer){clearInterval(this.timer);this.timer=null;}        
      this.dvTitle.innerHTML='';  
      if(cfg.title)this.dvTitle.innerHTML=cfg.title;  
      this.dvCT.innerHTML='';  
      if(cfg.wait){  
        if(cfg.msg)this.dvCT.innerHTML=cfg.msg;  
        this.dvCT.innerHTML+='<div class="pro"><div class="bg" id="dvProcessbar"></div></div>';  
        this.dvBtns.innerHTML='';  
        this.dvBottom.style.height='10px';  
        this.timer=setInterval(function(){Showbo.Msg.moveProcessbar();},1000);  
      }  
      else{  
        //if(!cfg.icon)cfg.icon=Showbo.Msg.INFO;  
        if(!cfg.buttons||(!cfg.buttons.yes&&!cfg.buttons.no)){  
          cfg.buttons={yes:'确定'};  
        }  
        if(cfg.icon)this.dvCT.innerHTML='<div class="icon '+cfg.icon+'"></div>';  
        if(cfg.msg)this.dvCT.innerHTML+=cfg.msg+'<div class="clear"></div>';  
        this.dvBottom.style.height='45px';  
        this.dvBtns.innerHTML='<div class="height"></div>';  
        if(cfg.buttons.yes){  
          this.dvBtns.appendChild(this.createBtn('yes',cfg.buttons.yes,cfg.fn));  
          if(cfg.buttons.no)this.dvBtns.appendChild(document.createTextNode('　'));  
        }  
        if(cfg.buttons.no)this.dvBtns.appendChild(this.createBtn('no',cfg.buttons.no,cfg.fn));  
      }  
      Showbo.initBodyScale();  
      this.dvMsgBox.style.display='block';  
      this.lightBox.style.display='block';  
      this.onResize(false);  
    },  
    hide:function(){  
      this.dvMsgBox.style.display='none';  
      this.lightBox.style.display='none';  
      if(this.timer){clearInterval(this.timer);this.timer=null;}  
      if(Showbo.IsIE)window.detachEvent('onresize',this.onResize);  
      else window.removeEventListener('resize',this.onResize,false);  
    },  
    onResize:function(isResize){  
       if(isResize)Showbo.initBodyScale();  
       Showbo.Msg.lightBox.style.width=Showbo.BodyScale.tx+'px';  
       Showbo.Msg.lightBox.style.height=Showbo.BodyScale.ty+'px';  
       Showbo.Msg.dvMsgBox.style.top=240+'px';  
       Showbo.Msg.dvMsgBox.style.left=Math.floor((Showbo.BodyScale.x-            
       Showbo.Msg.dvMsgBox.offsetWidth)/2)+'px';  
    }  

}
  • 直接复制测试就好！
  • 注意点：
    • 调用方法中可以自定义“确定”或“取消”的函数，点击事件中写方法名，然后执行自己定义的方法就可以，弹出框使用Showbo.Msg.confirm()方法，第一个参数是弹出框中的文字，第二个参数可以传函数，函数的形参就是点击到的yes或no。
    • 使用过程中修改默认css或js文件中内容有时候无法改变样式（不知道为什么----），然后只要使用的时候用js覆盖他的行内样式就可以了。（如果在chrome测试，记得多清除浏览器记录，反正我是被坑惨了---）

转载于:https://my.oschina.net/yxmBetter/blog/1083027

自定义弹框
梁馨
08-22 1531
我们如果想要实现这样的自定义弹框，需要怎么做呢，接下来就是教程 首先，我们需要创建一个类继承Dialog 下面就是代码 package com.bw.movie; import android.annotation.SuppressLint; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.widget..
自定义 弹出框
12-12
自定义 弹出框自定义
js自定义弹出框样式
01-22
alert和comfirm,里面有源码，代码复用性很高，如果你不满意我的，也可以适当的修改我的，想用的话，直接下载即可
自定义弹出窗口
10-14
自定义的可编辑的弹出窗口，用于输入框编写不下时使用
Android自定义弹出框实现（修改版）完整实例源码
01-14
在Android开发中，为了提供更好的用户体验，我们常常需要自定义弹出框来替代系统默认的对话框。这个“Android自定义弹出框实现（修改版）完整实例源码”就是一个很好的示例，它展示了如何根据自己的需求设计和构建...
android自定义弹出框实现（修改版）.zip
08-26
在Android开发中，自定义弹出框是一种常见的需求，它能提供更加个性化和灵活的交互方式。本项目“android自定义弹出框实现（修改版）”是一个针对原生Android弹出框进行定制化改造的例子，主要涉及Java编程语言。...
自定义弹出框提示框确认弹框
11-10
在软件开发中，自定义弹出框提示框和确认弹框是常见的用户界面元素，用于向用户展示重要的信息、请求用户的确认或输入。这些组件在交互设计中扮演着至关重要的角色，因为它们能够中断用户的操作流程，吸引注意力，并...
自定义弹出框样式 alert修改
08-08
自定义弹出框样式 alert修改 根据需要修改弹出框样式
自己定义的弹出框
Caroline_Yang的博客
05-24 267
1、先写俩盒子，一个是全屏覆盖的颜色透明点的覆盖框cover，一个是你的弹出框pop_frame&lt;div id="btn" style="width: 100px;height: 100px;font-size: 24px;line-height: 100px;text-align: center;color: blue;border: 1px solid blue;margin-left:...
设计制作一个自己的个性化弹出提示框
wordgold的博客
06-01 953
相关链接:[url]http://yu123.me/[/url] [url=http://yu123.me/2011/05/design-alert/]设计制作一个自己的弹出提示框[/url] [color=red][quote]说明:为什么评为新手帖?评了新手就请你说下理由！讨论也好改也好,我写的都是自己原创的,而且主要讲的是css与设计,这很新手吗? 我辛辛苦苦写半天,被你评新手,难...
自定义弹出框dialog
李平的博客
05-31 455
public void showCD(View v){ View view = View.inflate(this,R.layout.dialogview,null); EditText password = view.findViewById(R.id.password); EditText name = view.findViewById(R.id.name); new AlertDialog.Builder(MainActivit...
个性化设计：自定义弹出框的实现方法
在IT行业中，“自定义弹出框”是指能够根据用户的具体需求和设计来创建的弹出窗口。这种弹出框可以是信息提示、警告、确认操作等多种形式的对话框。下面将详细解释与自定义弹出框相关的知识点。 ### 知识点1：弹出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值