精华内容
下载资源
问答
  • 关于前端自动弹窗页面

    千次阅读 2016-06-08 19:19:16
    您已成功免费预约 *{ margin:0px; padding:0px;} /*弹出css开始*/ .layer_box { display:none; width:500px; height:500px; background:#FFFFFF; margin:0px auto; text-align:center; font-family: Microsoft ...
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>您已成功免费预约</title>
    <style>
    *{ margin:0px; padding:0px;}
    /*弹出css开始*/
    .layer_box { display:none; width:500px; height:500px; background:#FFFFFF; margin:0px auto; text-align:center; font-family: Microsoft YaHei;}
    .layer_box h2,.layer_box h3,.layer_box h4 {font-size: 100%; font-weight: 500;}
    .layer_icon { padding-top:56px; padding-bottom:38px;}
    .layer_icon span{ display:block; background:url(layer/layer_icon.png) no-repeat center center; width:88px; height:88px; margin:0px auto;}
    .layer_box h2,.layer_box h3 { font-size:26px; color:#171717;}
    .layer_box h3 span { color:#0f95da;}
    .layer_box h4 { font-size:24px; padding-top:44px;}
    .layer_box h4 cite { color:#e9130e;font-style:normal;}
    .layer_info { padding-top:60px; color:#7a7a7a;}
    .layer_info a { color:#e9130e;}
    /*弹出css结束*/
    </style>
    </head>
    
    <body><br>
    <br>
    <div id="test1">点击弹出</div>
    <div id="tong" class="layer_box">
    <div class="layer_icon"><span></span></div>
    <h2>您已成功免费预约!</h2>
    <h3>预约号:<span>14720417</span></h3>
    <h4><cite>6月20日10点开售</cite>,请别忘记哦!</h4>
    <p class="layer_info">发送预约号到美贝壳公众号领取红包!<a href="#" target="_blank">领取说明</a></p>
    </div>
    <script src="layer/jquery.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
    $('#test1').on('click', function(){
          layer.open({
    	  type: 1,
    	  title: false,
    	  closeBtn: 1,
    	  area: '516px',
    	  shadeClose: true,
    	  content: $('#tong')
    	});
    });
    </script>
    </body>
    </html>
    

    可以直接用layer插件,功能特别的强大!网址是 点击打开链接http://layer.layui.com/
    展开全文
  • 我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。一、alert弹窗 这种弹窗是最简单的一种,Selenium里有自带的方法来处理它,用...

    我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。

    一、alert弹窗

    SouthEast

    这种弹窗是最简单的一种,Selenium里有自带的方法来处理它,用switch_to.alert先定位到弹窗,然后使用一系列方法来操作:

    accept - 点击【确认】按钮

    dismiss - 点击【取消】按钮(如有按钮)

    send_keys - 输入内容(如有输入框)

    我们用以下代码就能实现切换至弹窗并点击【确定】按钮的效果:

    al = driver.switch_to_alert()

    al.accept()

    这里这个switch_to_alert()其实是旧写法,照理应该是用switch_to.alert(),但是新写法却会报错,目前猜测是版本问题,可能不支持新写法,这里就先用旧写法。

    以下是完整代码,为了运行的时候看得清楚,我加了两处等待:

    # encoding:utf-8

    from selenium import webdriver

    import time

    driver = webdriver.Firefox()

    driver.get("http://www.runoob.com/try/try.php?filename=tryjs_alert")

    driver.switch_to.frame("iframeResult")

    driver.find_element_by_xpath("html/body/input").click()

    time.sleep(1)

    al = driver.switch_to_alert()

    time.sleep(1)

    al.accept()

    二、自定义弹窗

    由于alert弹窗不美观,现在大多数网站都会使用自定义弹窗,使用Selenium自带的方法就驾驭不了了,此时就要搬出JS大法。这里举一个新世界教育官网首页的例子:

    SouthEast

    大家能看到,图中的这种弹窗就是现在主流的表现形式,处理这种弹窗可以利用HTML DOM Style 对象,有一个display属性,可以设置元素如何被显示,

    js = 'document.getElementById("doyoo_monitor").style.display="none";'

    完整代码如下:

    # encoding:utf-8

    from selenium import webdriver

    import time

    driver = webdriver.Firefox()

    driver.get("http://sh.xsjedu.org/")

    time.sleep(1)

    js = 'document.getElementById("doyoo_monitor").style.display="none";'

    driver.execute_script(js)

    是不是既简单又高效~

    展开全文
  • web前端组件开发 之 弹窗组件实现

    千次阅读 2017-03-22 02:57:24
    widget 抽象类首先抽象出弹窗组件的一些共有属性和方法。widget抽象类中 定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性:this.boundingBox = null; // 弹窗组件最外层容器 在widget抽象类中,...

    widget 抽象类

    首先抽象出弹窗组件的一些共有属性和方法。

    widget抽象类中 定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性:

    this.boundingBox = null;  // 弹窗组件最外层容器
    

    在widget抽象类中,提供4个接口,具体实现留给子类去实现。
    4个接口具体功能如下:

        //接口,添加DOM节点
        renderUI: function() {},
        //接口,绑定事件
        bindUI: function() {},
        //接口,初始化组件属性,如拖动,换肤等属性
        syncUI: function() {},
        //接口,销毁前的处理函数,类似析构函数
        destructor: function() {},
    

    并且为了方便调用renderUI ,bindUI ,syncUI 接口,还需要增加一个
    渲染组件的方法render ,在render方法依次调用以上接口。
    其中必须在bindUI 前面,定义自定义事件handlers对象,在bindUI方法之前,置为空。如果在构造函数中定义,当remove节点时,没有移除绑定的事件

    //渲染整个组件方法
    render: function(container) {
            this.renderUI();
            this.handlers = {};     //在这里定义handlers 对象
            this.bindUI();
            this.syncUI();
    $(container || document.body).append(this.boundingBox);
    },
    

    并且还需要一个销毁组件方法:

        //销毁组件方法
        destroy: function() {
           this.destructor();
           this.boundingBox.off();  //取消绑定在boundingBox上DOM层面的事件
           this.boundingBox.remove(); //移除组件最外层DOM节点
    
        },
    

    组件级别,监听自定义事件 ,一个on方法, 用来监听事件, fire方法,用来触发事件,什么时候触发。 具体实现如下:

        //组件级别,自定义事件 监听事件
        on: function(type, handler) {
            if (typeof this.handlers[type] == 'undefined') {
                this.handlers[type] = [];
            }
            this.handlers[type].push(handler);
            return this; //链式调用
        },
        //何时出发自定义事件,当触发时,自动去遍历所有handler,利用观察者模式
        fire: function(type, data) {
            if (this.handlers[type] instanceof Array) {
                var handlersArr = this.handlers[type];
                for (var i=0; i<handlersArr.length; i++) {
                        handlersArr[i](data);
                }
            }
        }
    

    window子类

    我们通过$.extend方法 在window原型上,实现继承,原理:把子类实现后接口后的字典跟widget类字典混合,代码如下:

    Window.prototype = $.extend({},new widget.Widget(), {
        //实现接口,添加DOM节点
        renderUI: function() {
             .....
             });
    

    同时window类中,构造函数 有一个 cfg的属性,定义窗口所有属性。

    this.cfg = {
                width: 500,     //窗口宽默认500px
                height: 300,    //窗口高默认是300px
                title: "系统消息",//窗口默认标题: 系统消息
                content: "",    
                ......
                }
    

    bindUI 具体实现: 监听事件,组件级别,和DOM级别事件监听
    代码如下:

        bindUI: function() {
            var that = this;
            //绑定JQ中on方法,添加事件绑定
            this.boundingBox.on("click", ".window_alertBtn", function(){
                that.fire("alert");   //触发封装的自定义事件
                that.destroy();
            });
           ......
    
            //组件级别自定义事件
            if (this.cfg.handler4AlertBtn) {
                this.on("alert", this.cfg.handler4AlertBtn);
            }
            ......
    

    此时 alert方法变得非常干净,清爽

    alert: function(cfg) {
            $.extend(this.cfg, cfg, {winType: "alert"});
            this.render();
            return this; //实现连缀语法
        },
    

    应用层 main.js 调用如下:

        $('#a').click(function(){
        var win = new w.Window();
            win.alert({
                title: "提示",
                content: "welcome!",
                width: 300,
                height: 150,
                y: 50,
                hasCloseBtn: true,
                text4AlertBtn: "OK",
                dragHandle: ".window_header",
                //skinClassName: "window_skin_a",
    
                handler4AlertBtn: function() {
                    alert("你第一次点击了OK按钮");
                },
    
                handler4CloseBtn: function() {
                    alert("你第一次点击了关闭按钮");
                }
            });
    
        win.on("alert", function() { alert("第二次点击了OK按钮!");});
        win.on("alert", function() { alert("第三次点击了OK按钮!");});
        win.on("close", function() { alert("第二次点击了关闭按钮!");});
    });
    

    至此,我们基本上,完成一个弹窗组件的实习思路

    最后一个效果如下:

    这里写图片描述

    这里写图片描述

    展开全文
  • html 网页调起QQ弹窗

    2018-09-13 18:01:00
    <a target="_blank" href="tencent://message/?uin=20001&site=qq&menu=yes">客服</a> 转载于:https://www.cnblogs.com/yuesu/p/9642115.html
    <a target="_blank" href="tencent://message/?uin=20001&site=qq&menu=yes">客服</a>

     

    转载于:https://www.cnblogs.com/yuesu/p/9642115.html

    展开全文
  • 我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。一、alert弹窗 这种弹窗是最简单的一种,Selenium里有自带的方法来处理它,用...
  • 前端部分.overlay{background:transparent url(images/overlay.png) repeat top left;position:fixed;top:0px;bottom:0px;left:0px;right:0px;z-index:100;}.box{position:fixed;background:rgba(0,0,0,0.8);color:#...
  • 要CSS布局HTML小编今天和大家分享: 打开网站时自动弹出对话框窗口,对话框内容:“welcome”哪位前辈高手有html的窗口弹出代码,最好是关闭IE浏览器然后弹出新的窗 无标题文档 function MsgBox() //声明标识符 { ...
  • 视频弹窗自动播放 关闭停止

    千次阅读 2019-06-15 15:35:00
    通过js,实现点击视频,视频弹窗自动播放 HTML代码 视频网页显示部分 <div id="videopic" class="videopic"> <div id="gamevideostyle" class="gamevideostyle"> ...
  • 一、环境: 1、前端:layui框架+Ajax 2、后端:springboot 二、前端代码 1、使用过的关闭命令: table.reload(EnterpriseInfo.tableId); admin.closeThisDialog();...关闭命令是可以使用的,唯一...三、解决关闭弹窗
  • 我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。 一、alert弹窗 这种弹窗是最简单的一种,Selenium里有自带的方...
  • python自动化用例alert()弹窗解决方案

    千次阅读 2020-06-09 18:05:48
    今天新搭建的一个python自动化框架,然后写个登录用例,然而 此系统的登录验证信息是弹窗,所以我就一顿百度,获取弹窗内容进行断言代码如下: #断言信息块 al = self.home_page.switch_to_alert() self.result =...
  • 如题:有时候做完操作后会有一些弹窗,但这些弹窗并不是alert弹窗,而是div弹窗,请问怎么判断是否出现弹窗? 备注:这些弹窗没有固定的id,class,没有固定的xpath,整个页面都是动态的 另一个问题,这个问题也许是...
  • 修改请求头类型是关键,IE浏览器会识别文件类型进行弹窗下载(IE默认的好像是text类型就直接打开了) 例如:headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); 采用SpringMVC框架当中的ResponseEntity&...
  • 前端开发前期需要注意的问题: 前端开发需要掌握的技能: 前端开发遇到的问题:
  • 在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动、选项卡循环播放、右下角广告弹窗、评论提交展示、选项动态增删、剪刀石头布小游戏等等等。。。是不是感觉都...
  • //用驱动打开网页 driver . get ( "https://www.xx.com/" ) ; //最大化网页窗口 driver . manage ( ) . window ( ) . maximize ( ) ; //通过id寻找元素并点击 driver . findElement ( By . ...
  • js前端自动下载文件(无刷新)

    千次阅读 2020-07-04 09:03:12
    也可以通过a标签设置href以及download属性,并自动点击实现其下载功能,关于其兼容性问题,可以判断download属性是否存在来弥补。 1)优缺点: 优点 :可以拿到其返回时机,可以做交互; 缺点 :线上产生大量的中间...
  • 作者:Real_Tino我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。1.alert弹窗这种弹窗是最简单的一种,Selenium里有自带的方法...
  • 首先我们需要了解一款强大的基于浏览器的开源自动化测试工具,Selenium,Selenium可以模拟真实用户的行为,就像真正的用户在操作一样,同时Selenium也可以执行JS脚本。 Selenium 经历了三个版本:Selenium 1,...
  • 所有javascript 全局对象,函数以及变量均自动生成为window对象的成员。全局变量是window对象的属性。 全局函数是window对象的方法。甚至HTML DOM 的document 也是window 对象的属性之一。  b。window尺寸: ...
  • html弹窗页面19种

    2018-02-09 16:46:46
    html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种html弹窗页面19种
  • 漂亮的div弹窗

    2013-09-27 12:33:34
    绝对实用 有demo 包括了5种可以利用的弹窗效果。简单易懂
  • 我们在浏览网页时经常会碰到各种花头的弹窗,在做UI自动化测试的时候势必要处理这些弹窗,这里就介绍一下目前前端界两种弹窗的处理方法。
  • 前端部分  .overlay{  background:transparent url(images/overlay.png) repeat top left;  position:fixed;  top:0px;  bottom:0px;  
  • 使用弹窗网页中显示短信息还行,虽然不那么地友好。然而,弹窗对于如同网站服务条款的长信息就无能为力的了。这是需要使用一个叫模态框modal的东西,并且在模态框里面嵌入一个多行文本框textarea。 这个东西,如果...
  • 前端自动触发点击事件

    千次阅读 2020-05-07 16:29:11
    //自动点击的方法 clickId 点击事件的id属性值 字符串类型 function autoClick(clickId) { // IE if (document.all) { document.getElementById(clickId).click(); } // 其它浏览器 else { var e =...
  • 关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法 第一种方法–向body动态写入div标签调用css效果显示: (新建***.jsp放在WebContent根目录下直接访问ip:端口\项目名\ **…jsp) <%@ page ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,816
精华内容 1,126
关键字:

网页前端自动弹窗