精华内容
下载资源
问答
  • 原生js封装popup

    2020-09-15 11:05:18
    原生js封装popupjs: <div class="popup" id="Popup"> <div class="popupContent"> <div class="tabBar"> <div class="tabBar_left">返回</div> title <div class="tabBar...

    原生js封装popup层

    html:

    <div class="popup" id="Popup">
    	<div class="popupContent">
    		<div class="tabBar">
                <div class="tabBar_left">返回</div>
                      title
                      <div class="tabBar_right">搜索</div>
                </div>
    	</div>
    </div>
    

    css:

    .popup {
    	position: fixed;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	z-index: 999;
    	background: rgba(0, 0, 0, 0.4);
    	display: none;
    }
    
    .popupContent {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	width: 100%;
    	height: 100%;
    	/* padding: 28px 7px; */
    	background-size: auto;
    	background: #fff;
    	overflow: auto;
    	color: #333333;
    	position: absolute;
    	top: 0;
    	left: 0%;
    
    }
    .tabBar {
    	width: 100%;
    	height: 46px;
    	line-height: 46px;
    	text-align: center;
    	background: #009889;
    	position: relative;
    	font-size: 16px;
    	color: #ffffff;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 999;
    }
    
    .tabBar_left {
    	position: absolute;
    	font-size: 14px;
    	cursor: pointer;
    	bottom: 0;
    	left: 16px;
    }
    
    .left_icon,
    .right_icon {
    	color: #ffffff;
    }
    
    .tabBar_right {
    	position: absolute;
    	font-size: 14px;
    	cursor: pointer;
    	bottom: 0;
    	right: 16px;
    }
    
    展开全文
  • 原生JS编写popup

    2017-03-10 15:06:18
    适用于微信公众号等各种手机页面端js脚本(function (window) { var sohanPopup = function(data){ //+body+ var body = document.getElementsByTagName('body')[0]; body.style.position = 'relative';

    适用于微信公众号等各种手机页面端

    js脚本

    (function (window) {
        var sohanPopup = function(data){
    
    
            //+body+
            var body = document.getElementsByTagName('body')[0];
            body.style.position = 'relative';
    
            //+底色框-----------------------+
            //创建
            var tempPopup = document.createElement("div");//创建底色div
            tempPopup.id = data.name.name1;
            body.appendChild(tempPopup);//添加tempPopup到body里面
            //获取
            var popupTLF = document.getElementById(data.name.name1);
            //宽高样式
            popupTLF.style.height = document.documentElement.clientHeight+'px';
            popupTLF.style.width = document.documentElement.clientWidth+'px';
            //其它样式
            popupTLF.style.position = 'absolute';
            popupTLF.style.backgroundColor = data.Dcolor||'#6b6767';
            popupTLF.style.top = 0;
            popupTLF.style.left = 0;
            popupTLF.style.zIndex =998;
            popupTLF.style.opacity =.6;
            popupTLF.style.display ='none';
    
            //+内容框--------------------------------+
            //创建
            var tempPopupC= document.createElement("div");//创建中间内容div
            tempPopupC.id = data.name.name2;
            body.appendChild(tempPopupC);//添加tempPopupC到body里面1
            //获取
            var popupTLFC = document.getElementById(data.name.name2);
            //样式
            popupTLFC.style.height = (document.documentElement.clientHeight * data.centent.height)+'px';
            popupTLFC.style.width = (document.documentElement.clientWidth * data.centent.width)+'px';
    
            popupTLFC.style.marginLeft = (-document.documentElement.clientWidth * data.centent.width /2)+'px';
            popupTLFC.style.marginTop = (document.documentElement.clientHeight *.05)+'px';
            popupTLFC.style.backgroundColor = data.centent.Dcolor || '#fff';
            popupTLFC.style.position = 'absolute';
            popupTLFC.style.top = data.centent.topHeight;
            popupTLFC.style.left = '50%';
            popupTLFC.style.zIndex = 999;
            popupTLFC.style.borderRadius = '10px';
            popupTLFC.style.display = 'none';
    
    
            //+内容框+--->上
            //创建
            var tempPopupCT= document.createElement("div");//创建中间内容-上div
            tempPopupCT.id = data.name.name3;
            popupTLFC.appendChild(tempPopupCT);//添加tempPopupCT到body里面
            //获取
            var popupTLFCT = document.getElementById(data.name.name3);
            //样式
            popupTLFCT.style.height = (document.documentElement.clientHeight * data.centent.height - 42)+'px';
            popupTLFCT.style.width = (document.documentElement.clientWidth * data.centent.width)+'px';
            popupTLFCT.style.boxSizing ='border-box' ;
            popupTLFCT.style.padding ='20px 20px 0 20px' ;
            popupTLFCT.style.overflow ='auto' ;
            //创建内容
            var tempSpan= document.createElement("span");//创建中间内容-上div
            tempSpan.innerText = '*温馨提示';
            tempSpan.id = data.name.name4;
            popupTLFCT.appendChild(tempSpan);//添加tempPopupCT到body里面
            //获取第一个span(*温馨提示)
            var firstSpan = document.getElementById(data.name.name4);
            firstSpan.style.marginTop = '0px';
            firstSpan.style.color = '#d95737';
            firstSpan.style.display = '#block';
            firstSpan.style.marginTop = '8%';
            firstSpan.style.fontSize = '16px';
    
            var tempArr = data.datas;
            for(var i=0; i<tempArr.length; i++){
                var otherSpan =  popupTLFCT.appendChild(document.createElement("span"));
                otherSpan.innerText = tempArr[i];
                otherSpan.style.display = 'block';
                otherSpan.style.marginTop = data.centent.distance || '5%';
                otherSpan.style.fontSize = data.centent.size || '16px';
                otherSpan.style.color =  data.centent.color || '#0c314e';
            }
    
            //+内容框+--->下
            //创建
            var tempPopupCB= document.createElement("div");//创建中间内容-上div
            tempPopupCB.innerText = '关闭';
            tempPopupCB.id = data.name.name5;
            popupTLFC.appendChild(tempPopupCB);//添加tempPopupCT到body里面
            //获取
            var popupTLFCB = document.getElementById(data.name.name5);
            //样式
            popupTLFCB.style.position ='absolute' ;
            popupTLFCB.style.width ='100%' ;
            popupTLFCB.style.height ='40px' ;
            popupTLFCB.style.bottom =0 ;
            popupTLFCB.style.lineHeight = '40px' ;
            popupTLFCB.style.textAlign = 'center' ;
            popupTLFCB.style.fontSize = '16px' ;
            //->变量的值
            //边框颜色
            popupTLFCB.style.borderTop = '1px solid '+ data.close.Tcoloe;
    
            //字体颜色
            popupTLFCB.style.color = data.close.color || '#46bbc5' ;
    
            //关闭的点击事件
            popupTLFCB.onclick = function(){
                popupTLF.style.display = 'none';
                popupTLFC.style.display = 'none';
            };
            //打开的点击事件
            var testBtn = document.getElementById(data.id);
            testBtn.onclick = function(){
                popupTLF.style.display = 'block';
                popupTLFC.style.display = 'block';
            };
    
    
    
    
        };
        window.sohanPopup = sohanPopup;
    })(window);
    

    调用方式

    ohanPopup({
                //不一样就行
                name:{
                  name1:'tlf1',
                  name2:'tlf2',
                  name3:'tlf3',
                  name4:'tlf4',
                  name5:'tlf5',
                },
                id:'paycard_btn',//点击事件的id
                Dcolor:'',//底层颜色(默认为#6b6767)
                centent:{
                    width:0.8,//中间框宽占比
                    height:0.8,//中间框高占比
                    topHeight:'5%',//上边距
                    Dcolor:'',//中间底色(默认为#fff)
                    size:'',//字体大小(默认为16px)
                    color:'',//字体颜色(默认为#0c314e),
                    distance:'3%'//数据之间的行距(默认是5%)
                },
                close:{
                    color:'',//关闭字体颜色(默认#46bbc5),
                    Tcoloe:'#eee'//边框颜色
                },
                //呈现的数据
                datas:[
                    '1、我是第1行',
                    '2、我是第2行',
                    '3、我是第3行',
                    '4、我是第4行'
                ]
            });
    

    效果图
    这里写图片描述

    展开全文
  • x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。
  • 需求 h5页面嵌入到了原生app内, ...//js原生app交互 window.showSearch = (res) => { this.popupShow = !this.popupShow } 2.js原生app传值 AppData这个JSON对象是我们要向app传的所有参数,decision是h

    需求

    h5页面嵌入到了原生app内, 所以需要接收原生app的方法和参数,以及向原生app传值

    解决办法

    1.原生app调用h5的方法,以及向h5传参
    showSearch是h5代码中控制是否显示popup层的方法名,res是原生app传过来的参数,h5代码:

    //js与原生app交互
        window.showSearch = (res) => {
          this.popupShow = !this.popupShow
          console.log(res)//res就是原生app传过来的参数
        }
    

    2.js向原生app传值
    AppData这个JSON对象是我们要向app传的所有参数,decision是h5开发人员和app开发人员约定好的方法,

         var AppData = Object.assign(
            {params:data}
          );
          var u = navigator.userAgent,
            app = navigator.appVersion;
          //android终端或者uc浏览器
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
          //ios终端
          var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/);
          
          if(isiOS){
            window.webkit.messageHandlers.decision.postMessage(AppData);
          }else if(isAndroid){
            android.decision(JSON.stringify(AppData));
          }
    

    js调用原生Android有两种写法:

    //第一种
    JavaScript:android.原生方法名(params);
    //第二种
    window.android.原生方法名(params);
    
    展开全文
  • x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。
  • 原生JS 弹窗组件

    2016-07-08 15:48:00
    <!doctype html> <html> <head> <meta charset="utf-8"> <title><...link href="popup.css" rel="stylesheet"> </head> <body> <...

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <link href="popup.css" rel="stylesheet">
    </head>
    
    <body>
    
    <div id="popup-mask"></div>
    <div id="popup"></div>
    
    <script src="popup.js"></script>
    <script>
    popup({
        id : 'popup',    // 元素id 必须 可换成其他id名 同时需更换css文件中的样式名
        width : 500,    // 弹窗宽度 默认500 非必须
        height : 400,    // 弹窗高度 默认400 非必须
        background : '#fff',    // 背景色 默认白色 非必须
        borderRadius : 'round',    // 默认圆角 直角为rect 非必须
        borderRadiusPx : 4,        // 圆角默认4px 直角为0
        maskId : 'popup-mask',    // 遮罩id 必须 可换成其他id名 同时需更换css文件中的样式名
        maskOpacity : 0.5        // 遮罩默认透明度0.5 
    });
    
    // popup({ id : 'popup', maskId : 'popup-mask'}); 只传id 效果一样
    </script>
    </body>
    </html>

     

    /*
        popup.css 弹窗默认样式
    */
    
    body{ margin:0;}
    
    #popup-mask{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:#000;
    }
    
    #popup{
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }

     

    /*
        @desc         popup 弹窗组件
    */
    
    function popup( object ){
        
        var id = object.id || 'popup',
            width = object.width || 500,
            height = object.height || 400,
            background = object.background || '#fff',
            borderRadius = object.borderRadius || 'round',
            borderRadiusPx = object.borderRadiusPx || 4,
            maskId = object.maskId || 'popup-mask',
            maskOpacity = object.maskOpacity || 0.5;
            
            
        var obj = document.getElementById( id ),
            maskObj = document.getElementById( maskId );
        
        obj.style.width = width + 'px';
        obj.style.height = height + 'px';
        obj.style.background = background;
        
        if( borderRadius === 'round' ){
            obj.style.borderRadius = borderRadiusPx + 'px';
        }else if( borderRadius === 'rect' ){
            obj.style.borderRadius = 0;
        };
        
        if( window.navigator.userAgent.toLowerCase().indexOf('ie') !== -1 ){
            // ie 浏览器
            maskObj.style.filter = 'alpha(opacity:'+(maskOpacity*100)+')';
        }else{
            maskObj.style.opacity = maskOpacity;
        };
        
    };

     

    转载于:https://www.cnblogs.com/carol1987/p/5653624.html

    展开全文
  • x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。它的特点还有:轻量级,压缩后的版本小于4kb。纯js,无外部依赖库。扁平化风格设计。...
  • 遮罩层为父子关系 /* html */ <div class="container"> <div id="popup"> <span>主题</span> <div> <span>1</span> <span>2</span.
  • 学习之路uni-popup

    2021-02-23 10:28:16
    初次接触uniapp时用原生js来实现弹出遮罩层的,之后了解到uni-app提供了插件uni-app 学习下来之后 着实方便很多 在components中导入uni-popup组件 在需要弹出层的页面中引入uni-popup 使用unipopup时要在内部...
  • 1.和pages文件同级的文件components文件夹下创建一个想要的组件popup,popup组件有popup.html, popup.css, popup.json, popup.js 四个文件 2.组件中写入传入的参数,在properies中声明传入参数类型 3.父组件给子组件...
  • js: var Popup = { /* * alert 弹窗 text 必传 */ alert: function(text) { var model = document.getElementById('popupMark'); if (model) { var content = document...
  • js实现警告框消息框和确认框特效是一款基于x0popup.js实现的用于替代原生警告框,消息框和确认框的纯js插件。
  • js实现警告框消息框和确认框特效是一款基于x0popup.js实现的用于替代原生警告框,消息框和确认框的纯js插件。
  • js 弹出层

    2013-06-05 21:18:00
    原生js写的demo,弹出效果比较生硬。先看一下demo(点击这里) 先。 接下来是代码: var Popup=(function(){ var close_trigger, //关闭弹出层触发器 popup_layer, //弹出层 popup_layer_box; ...
  • 使用官方的react-native Animation包以纯JS编写这意味着它支持所有Expo / CRNA应用程序 支持iPhone X,XS,Max(是的) 支持Android原生的“海拔” 动机 在某些应用中,您可能只想向用户显示提醒,而无需进行那些...
  • 最近,项目中的用到的Js插件越来越多,有的是用原生javascript写的,有的是调用的jquery插件,页面上Js和Css文件的引用也越来越混乱,而且Js文件之间还有引用先后的依赖关系,如: <!— Js插件 --><...
  • 在React Native项目视图层上面在创建一个视图层,主要作用代替原生Modal组件实现一些弹窗、遮罩层等组件,并且可以js调用。下面有使用实例。 注意:未经允许不可私自转载,违者必究 React Native官方文档:...
  • js原生 1.添加类名 // 添加类名 this.$refs.ok.classlist.add('none'); // 删除类名 this.$refs.ok.classlist.remove('none'); Vue 爬坑 1.子传父 写法 /*父组件*/ <van-popup v-model="vantObj.show" position=...
  • jquery etalage图片放大镜插件鼠标移到小图片放大预览图片点击》jquery etalage图片放大镜插件...popup窗口插件,鼠标滑过弹出注释框原生js对联广告代码制作浮动固定层可关闭对联广告横幅https://www.mk2048.com/demo/d
  • 前端技术变化

    2016-07-04 16:39:06
    原生js的基础上作了一些简单封装,形成了包括表单校验,弹出菜单(基于popup),简单图表(基于XML),动态表单等功能的业务公共库。 使用XMLHTTP作为前后端通信方式,将请求参数序列化为XM...
  • uni-popup 弹出层 uni-rate 评分 uni-row 布局-行 uni-search-bar 搜索栏 Section 标题栏 uni-segmented-control 分段器 uni-steps 步骤条 uni-swipe-action 滑动操作 uni-swiper-dot 轮播图指示点 ...
  • -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

js原生popup