精华内容
下载资源
问答
  • vue使用弹出框a-Modal

    千次阅读 2020-11-23 21:07:15
    <a-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen :footer="null" // 隐藏底部 @ok="handleOk" @cancel="handleCancel" cancelText="关闭" > <a-...
     <a-modal
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        switchFullscreen
        :footer="null"   // 隐藏底部 
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭"
        >
     <a-modal/>
    
    展开全文
  • 弹出框A->弹出框B,但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌,可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数:modal-append-to-b

    Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法

    这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下:
    情况A:有多个弹出框,你想要的效果可能是 页面->弹出框A->弹出框B,但是实际上出现的是 页面->弹出框B->弹出框A
    如图所示。图是在网上找的
    遇到这种情况不要慌,可以在el-dialog标签里添加 :
    :modal-append-to-body=‘false’
    参数:modal-append-to-body
    说明:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上
    在这里插入图片描述
    大功告成!也有的朋友加上这句话不太行。可以尝试在第二个弹框中加上append-to-body这句话
    参数:append-to-body
    说明:Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
    情况B:弹出框上有el-select,这种就好解决了,以为el-select没有灰色遮罩层,所以只需要拿到el-select这个元素 加上z-index:9999
    如果发现拿不到这个元素,可以加上
    /deep/ .el-popper{ z-index:9999 }
    over!

    展开全文
  • Bootstrap4 弹出框

    2020-07-12 13:21:26
    弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的...a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a> 注意: 弹出框要写在 jQuery 的初始.

    弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。

    如何创建弹出框 通过向元素添加 data-toggle=“popover” 来来创建弹出框。 title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容:

    <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
    

    注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 以下实例可以在文档的任何地方使用弹出框:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h3>弹出框实例</h3>
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
    </div>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    指定弹出框的位置 默认情况下弹出框显示在元素右侧。 可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h3>弹出框实例</h3> <br><br><br><br><br><br>
      <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
      <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
      <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
      <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>
    </div>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    按钮中使用:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h3>弹出框实例</h3> <br><br><br><br><br><br>
      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
      </button>
    
      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
      </button>
    
      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
      sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
      </button>
    
      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
      </button>
    </div>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    关闭弹出框 默认情况下,弹出框在再次点击指定元素后就会关闭,你可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h3>弹出框实例</h3> <br>
      <a href="#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
    </div>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    提示:如果你想实现在鼠标移动到元素上显示,移除后消失的效果,可以使用 data-trigger 属性,并设置值为 “hover”:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h3>弹出框实例</h3> <br>
      <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">鼠标移动到我这</a>
    </div>
    
    <script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
    });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 仿IOS弹出框

    2015-10-21 17:02:26
    仿IOS弹出框,简单实用!...a.Android自带的弹出框确实太丑了,而且版本不同弹出的效果还不一样! b.纯粹的new一个AlertDialog要写很多行,代码维护不便,重复劳动啊! c.代码看起多,不简洁,肯定不爽!
  • layer弹出框、提示框及确认框

    万次阅读 2019-06-08 22:04:22
    弹出框 <a onClick="checkIn(this)" id="0">弹出框</a> function checkIn(obj) { var id = $(obj).attr('id'); var index = layer.open({ type: 1, title: '弹出框标题', area: [...
    弹出框
    
    <a onClick="checkIn(this)" id="0">弹出框</a>
    function checkIn(obj) {
        var id = $(obj).attr('id');
        var index = layer.open({
            type: 1,
            title: '弹出框标题',
            area: ['550px', '200px'],
            shadeClose: true, //点击遮罩关闭
            content:
                '<div>\n' +
                    '<a id="check">提交</a>\n' +
                '</div>'
        });
    
        $("#check").click(function () {
                ......
                return false;
            }
            layer.close(index);
            $.ajax({
                type: "post",
                data: {},
                url: "",
                async: true,
                dataType: "json",
                success: function(data) {
                    window.location.href = "";
                }
            });
        });
    }
    
    提示框
    layer.msg('提示框',{icon:5,time:1000});
    
    确认框
    layer.confirm('你确定要删除该广告吗?', {icon: 3, title:'提示'}, function(index){
        ......
        layer.close(index);
    });
    
    展开全文
  • Bootstrap弹出框

    2017-07-11 23:53:00
     表面上看,弹出框其实就是一种特殊的提示框,只是多了一个标题而已。但实际上,还是有不同之处的。本文将详细介绍Bootstrap弹出框 基本用法  在制作提示框(tooltip)时,可以使用<button>或者<a>...
  • 弹出框有两种:页面弹出框(可定位元素能操作)、Windows弹出框(不能直接定位) 一、页面弹出框 等待弹出框出现之后,定位弹出框,操作其中元素 如:  driver = webdriver.Chrome() driver.get(...
  • 弹出框

    2013-07-09 14:18:00
    弹出框由中心点向四周展开效果;展开内容为a标签里链接页面;类似于iframe嵌套 http://nyromodal.nyrodev.com(官网里适应于各种版本) a标签里加 target="_blank" 即可引用到iframe框架实现; html: <...
  • JQ 弹出框

    2020-10-26 15:33:47
    //生成弹出框的方法 function appendHtml(type){ var html = ""; html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">标题</span>'; html += '<a id="mb_ico...
  • 整个实例在最下面,复制到编辑器上直接看效果 1.HTML部分 &amp;lt;div id=&quot;branch&quot;&amp;gt; &amp;lt;div class=&...点击出现弹出框&amp;lt;/button&amp;gt; &a
  • Android 弹出框

    2014-08-03 18:20:00
    Android 弹出框 1、Java package com.fish.helloworld; import android.app.Activity; import android.app.AlertDialog; import android.a...
  • vue模态弹窗动画 沃达尔 (Vodal) A Nice vue modal with animations. 带有动画的尼斯vue模态。 安装 npm i -S vodal ...点击弹出</button> <vodal :show="show" animation="rotate" @hide="show = fa
  • miniUI中弹出框问题

    千次阅读 2017-06-09 09:35:00
    设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"> 新增</a> 弹出框 <div id="editWindow1" class="mini-window" title="新增企业" style="width:800px; ...
  • bootstrap弹出框popover

    2017-03-09 11:10:31
    今天学习了bootstrap弹出框的功能可以消失的弹出框 1.引用bootstrap的js和css然后开始写代码 解读:id来取dom点。 tabindex="0" role="button" role和a标签来适应各个浏览器。 data-trigger="focus"控制可以隐藏....
  • 本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下 初学vue框架,小小的写了一个登录弹出框效果 各路大佬多多指教。 不多废话,直接上代码: CSS: *{margin:0;padding:0;} /*...
  • 最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题。 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,...
  • java提示信息弹出框

    千次阅读 2020-08-30 16:39:53
    java提示信息弹出框 一、效果展示 A(带?图标) B(带!图标) C(带 ¡ 图标) D(无图标) ...
  • js 弹出框

    2018-10-13 18:08:04
    // NO.1 &lt;a href="javascript:if(confirm('确实要删除该内容吗?...弹出窗口&lt;/a&gt; // NO.2 &lt;script language="JavaScript"&gt;  function delete_confirm(e)  ...
  • selenium有一个专门对付js中的onclick函数告警的方法Methods defined here:__init__(self, driver)Creates a new Alert.:Args:- driver: The WebDriver instance which performs user actions.accept(self)Accepts...
  • 高仿IOS的Android弹出框

    2021-01-20 09:31:32
    本文实例为大家分享了Android弹出框的具体代码,供大家参考,具体内容如下 先看一下效果图,不过这是网上的图片。 效果不错,就借此拿来与大伙分享分享。 github源码地址:...
  • 关于 DWZ 弹出框

    2015-07-28 17:04:00
    1、弹出框 <a name="***" class="***" href="${** }/***.do?action=***&属性=${对应的值}" target="dialog" > target="dialog" 是弹出框标识 target="navTab" 是新页面标识 转载于:...
  • android 自定义登陆弹出框

    千次阅读 2016-10-29 18:25:12
    这节是一个自定义登陆弹出框,接着上一节的logo全屏页面之后将出现一个全屏的ImagView,点击弹出自定义登陆框,输入账号密码提交,弹出提交等待框效果如图:   提交等待框:   代码: Java代码 ...
  • ajax修改弹出框数据

    2020-05-23 11:49:15
    之前遇到一个问题,耗费了很长时间,觉得可以...主要包括两个点,一个是ajax访问规格接口,返回数据之后,拼接成字符串,放到弹出框内,一个是鼠标的失去焦点事件处理 html代码 <td><a href="javascript:v
  • 第一款:页面遮罩弹出框是最常见的一种状况,用jQuery完成页面遮罩弹出框,主要用的技能有JQuery,css与html。  html代码下列: <div id=main><a>点击这里查看效果</a> <div id=fullbg></div> ...

空空如也

空空如也

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

弹出框a