精华内容
下载资源
问答
  • 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-modal/>
    
    更多相关内容
  • html下各种弹出框模板(提示框,确定+取消,确定等)包括调用的js和css文件。实测可用,。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  • 【JQuery】JQ实现页面弹出框

    千次阅读 2020-12-21 13:40:13
    今天尝试用JQ来实现一下,具体的思路就是: 在页面中创建一个div 用JQ中的hide()和show()来控制上面的div的隐藏和显示 ...页面弹出框</title> <style> #popUpBox{ display: block;

    bootstrap4里面有个模态框,点击页面中的某个按钮或者元素就会弹出一个框框:
    在这里插入图片描述
    在这里插入图片描述
    今天尝试用JQ来实现一下,具体的思路就是:

    1. 在页面中创建一个div
    2. 用JQ中的hide()和show()来控制上面的div的隐藏和显示

    第一步:创建按钮,div,样式

    <head>
    	<meta charset="UTF-8">
    	<title>页面弹出框</title>
    	<style>
    		#popUpBox{
    			display: block;		//一开始应该是隐藏状态,所以是none
    			width: 1080px;	//弹出框的宽
    			height: 630px;	//弹出框的高
    			background-color: yellow;
    			margin:0 auto;	//弹出框页面居中
    		}
    		</style>
    	</head>
    <body>
    	<button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
    	<div id="popUpBox">
    		//里面是弹出框的内容	
    	</div>
    </body>
    

    第二部:引入JQ文件和写函数实现功能

    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    <script>
    	function ShowBox(BoxID){
    		//获取页面要显示的弹出框的id
    		var popBox = $("#"+BoxID);
    		//用show()方法使其显示出来
    		popBox.show();
    	}
    	function HideBox(BoxID){
    		//获取页面要隐藏的弹出框的id
    		var popBox = $("#"+BoxID);
    		//用hide()方法使其隐藏
    		popBox.hide();
    	}
    </script>
    

    效果:
    在这里插入图片描述
    在这里插入图片描述
    第三步:优化一下弹出框的细节,比如右上角给它加个关闭的功能等等,放上全部代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>页面弹出框</title>
    		<style>
    			#popUpBox{
    				display: none;
    				width: 1080px;
    				height: 630px;
    				margin: 0 auto;
    				background-color: yellow;
    			}
    			#BoxHead{
    				/*文字水平居中*/
    				text-align: center;	
    				/*宽度继承popUpBox的,不需要设置*/
    				height: 40px;
    				border: 1px solid black;
    			}
    			#BoxHead>*{
    				/*只有一行,将line-heigh的数值设置的和父容器的高度一样*/
    				/*可以实现垂直居中*/
    				line-height: 40px;
    			}
    			#BoxHead>a{
    				float: right;
    				margin-right: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
    		<div id="popUpBox">
    			<!--弹出框的头部,里面有弹出框标题和关闭按钮-->
    			<div id="BoxHead">
    				<label>弹出框</label>
    				<a href="javascript:void(0)" onclick="HideBox('popUpBox')">x</a>
    			</div>
    			<!--弹出框的主体部分-->
    			<div id="BoxBody"></div>
    			<!--弹出框的底部,可以加一些功能按钮,比如说保存按钮-->
    			<div id="BoxFooter"></div>
    		</div>
    	</body>
    	<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    	<script>
    		function ShowBox(BoxID){
    			//获取页面要显示的弹出框的id
    			var popBox = $("#"+BoxID);
    			//用show()方法使其显示出来
    			popBox.show();
    		}
    		function HideBox(BoxID){
    			//获取页面要隐藏的弹出框的id
    			var popBox = $("#"+BoxID);
    			//用hide()方法使其隐藏
    			popBox.hide();
    		}
    	</script>
    </html>
    
    

    最终效果:
    在这里插入图片描述


    上面这就是用JQ对弹出框功能的实现,实际应用中建议从外部引入CSS文件,免得太乱了,还有就是JQ的show()和hide()可以设置speed参数,就显示和隐藏的速度,会有一个淡入淡出的效果。

    hide(1000);
    show(1000);
    
    展开全文
  • 弹出框有两种:页面弹出框(可定位元素能操作)、Windows弹出框(不能直接定位) 一、页面弹出框 等待弹出框出现之后,定位弹出框,操作其中元素 如:  driver = webdriver.Chrome() driver.get(...
  • Layer弹出框

    千次阅读 2019-06-09 15:00:09
    Layer弹出框 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年6月8日 layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件,对各类浏览器中的兼容性也很好。使用它可以创建出交互体验...

    Layer弹出框

    开发工具与关键技术:Visual Studio 2015
    作者:徐晶旗
    撰写时间:2019年6月8日 
    

    layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件,对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。layer 提供了信息框、询问框、页面层、iframe 和 tips 等多种展示方式,今天我要讲的就是用layer弹出页面层。首先到相应的位置引用css插件和js插件

    @*css插件*@
    <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
    @*js插件*@
    <script src="~/Plugins/layui/layui.js"></script>
    <script src="~/Plugins/layui/layui.all.js"></script>
    

    注:这上面两个js插件只要引用一个即可,看个人喜好,不过用layui.js插件要到js代码中加载一下模块,要不然模态框就弹不出来,如果用layui.all.js则不需要加载模块,因为它有内置模块,所以不需要另外去加载它,不过layui.js插件中内置的功能多一点,所以我一般喜欢用它。
    下面代码是加载模块的方法。

       $(function () {
                layui.use('layer', function () {
                })
            });     
    

    然后找到要弹出模态框的位置给它绑定一个id

    <li>
    <a href="JavaScript:;" id="Yonghuquanxian">用户及权限设定</a>
    </li>   
    

    再到这个要弹出的模态框的内容部分给它一个id值,这个id值里面的内容就是模态框中的内容,因代码内容部分较多,所以到这里只展示一部分代码了?

      <div id="listen">
              <div class="header layui-col-sm12">
                    <div class="cute layui-col-sm1">
                        <div style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/10000001.JPG" /><br> <b>添加</b>
                            </a>
                        </div>
                    </div>
                    <div class="cute layui-col-sm1 ">
                        <div style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/10000009.JPG" /><br> <b>修改</b>
                            </a>
                        </div>
                    </div>
                    <div class="cute layui-col-sm1">
                        <div style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/10000003.JPG" /><br> <b>保存</b>
                            </a>
                        </div>
                    </div>
                    <div class="cute layui-col-sm1">
                        <div style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/66.JPG" /><br> <b>取消</b>
                            </a>
                        </div>
                    </div>
                    <div class="cute layui-col-sm1">
                        <div style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/10000027.JPG" /><br> <b>删除</b>
                            </a>
                        </div>
                    </div>
                    <div class="cutes layui-col-sm2">
                        <div id="Power"style="border: 1px solid #f8f8ff;">
                            <a href="#">
                                <img src="~/Content/img/68.JPG" /><br> <b>权限设定</b>
                            </a>
                        </div>
                    </div>
                </div>
    </div>
    

    然后就要写点击绑定的id值弹出模态框的方法,首先是写layer.open弹出模态框,然后到title中写模态框的表头内容,再写type的类型值,layer提供了5种层类型.可传入的值有: 0(信息框,默认), 1(页面层),2(ifram层),3(加载层),4(tips层)。若采用layer.open(type:1)方式调用,则type为必填项(信息框除外),所以我到这里要弹出页面层就要设置type的值为1,然后content后面的是拼接的内容部分,area后面写的是模态框的宽和高。到这里这个弹出模态框就完成了?

    $("#Yonghuquanxian").click(function () {
                layer.open({
                    title: '<div class="col-lg-12" style="height:30px;" id="tops"> <div class="wram text-left"><img src="/Content/img/icon.png" /><b>用户管理</b> </div></div>',
                    type: 1,
                    content: $('#listen'),
                    area: ['800px', '480px']
                });
    

    执行代码后的图片如下,点击用户及权限设定,不管当前在哪个页面都能弹出这个模态框
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue模态弹窗动画 沃达尔 (Vodal) A Nice vue modal with animations. 带有动画的尼斯vue模态。 安装 npm i -S vodal ...点击弹出</button> <vodal :show="show" animation="rotate" @hide="show = fa

    vue模态框弹窗动画

    沃达尔 (Vodal)
    A Nice vue modal with animations.

    带有动画的尼斯vue模态。
    安装

    npm i -S vodal
    

    用法

    <template>
      <div class="home">
        <button @click="togglebox">点击弹出</button>
        <vodal :show="show" animation="rotate" @hide="show = false">
          <div>A vue modal with animations.</div>
        </vodal>
      </div>
    </template>
    
    <script>
    import Vodal from "vodal";
    export default {
      name: "name",
      components: {
        Vodal,
      },
      data() {
        return {
          show: false,
        };
      },
      methods: {
        togglebox: function () {
          this.show = true;
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    // include animation styles
    @import "../../node_modules/vodal/common.css";
    @import "../../node_modules/vodal/rotate.css";
    </style>
    
    

    效果
    在这里插入图片描述

    道具 (Props )
    PropertyTypeDefaultDescription
    widthnumber400width of dialog
    heightnumber240height of dialog
    measurestringpxmeasure of width and height
    showboolfalsewhether to show dialog
    maskbooltruewhether to show mask
    closeButtonbooltruewhether to show close button
    closeOnEscboolfalsewhether close dialog when esc pressed
    closeOnClickMaskbooltruewhether close dialog when mask clicked
    animationstringzoomanimation type
    durationnumber300animation duration
    classNamestring/className for the container
    customStylesobject/custom dialog styles
    customMaskStylesobject/custom mask styles
    属性 类型 默认 描述
    宽度 400 对话宽度
    高度 240 对话高度
    测量 像素 宽度和高度的度量
    表演 布尔 是否显示对话框
    面具 布尔 真正 是否戴面具
    closeButton 布尔 真正 是否显示关闭按钮
    closeOnEsc 布尔 按下esc时是否关闭对话框
    closeOnClickMask 布尔 真正 单击蒙版时是否关闭对话框
    动画 放大 动画类型
    持续时间 300 动画时长
    班级名称 / 容器的className
    customStyles 目的 / 自定义对话框样式
    customMaskStyles 目的 / 自定义蒙版样式

    事件 (Event)

    NameDescription
    hidetriggers when dialog will hide
    clickMasktriggers when mask clicked
    名称 描述
    隐藏 对话框隐藏时触发
    clickMask 单击蒙版时触发

    动画类型 (Animation Types)

    • zoom

      放大

    • fade

      褪色

    • flip

      翻转

    • door

    • rotate

      旋转

    • slideUp

      向上滑动

    • slideDown

      滑下

    • slideLeft

      向左滑动

    • slideRight

      向右滑动

    展开全文
  • layer mobile手机端弹出框,询问框http://blog.csdn.net/libin_1/article/details/50726055
  • js自定义弹出框

    千次阅读 2019-05-22 12:17:27
    <a href="javascript:void(0)" onclick="cancel()">Χ</a> 请输入数量" id="number"> ()">取消 ()">确定 function chickMe() { let d2=document.getElementById("d2"); d2.style.display=...
  • { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }, { id: 4, name: "d" }, ] } }, methods:{ toggle(index){ console.log(index) this.cIndex = index; this.dialog = !this.dialog; ...
  • 仿IOS弹出框

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

    千次阅读 2019-07-25 14:32:21
    一、Bootstrap 弹出框 弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 1.1 ...
  • 下拉选择框、弹出框、滚动条操作

    千次阅读 2019-09-28 10:45:31
    2. 掌握处理弹出框的方法 3. 掌握调用JavaScript方法 1. 下拉选择框操作 说明:下拉框就是HTML中<select>元素; 1.1 如何操作下拉选择框? 案例 需求:使用‘注册A.html’页面,完成对城市的下拉框的...
  • html弹出框

    千次阅读 2020-04-13 14:14:04
    <html> <head> ;... } style> head> <body> <a href="javascript:show()">弹出a> <div id="login"> <a href="javascript:hide()">关闭a> 这里是关闭弹窗的内容div> div> <div id="over">div> body> ...
  • vue弹出框组件封装

    千次阅读 2019-10-30 11:20:22
    1.你需要先建一个弹出框的模板: //首先创建一个mack.vue <template> <div class="mack" v-if="isShow" > <div :style="text.mackStyle"> <div class="title font_b" v-if='text.tit...
  • js+div实现弹出框

    千次阅读 2019-06-19 09:53:08
    input type="button" name="popBox" value="弹出框" onclick="popBox()"> <div id="popLayer"></div> <div id="popBox"> <div class="close"> <a href="javascript:voi...
  • 小程序弹出框详解

    千次阅读 2018-12-05 21:38:38
    小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { console.log(res); console.log(itemList[r...
  • #操作js弹出框,alert、confirm、prompt都是一样的操作 alert = driver.switch_to.alert alert.accept() alert.dismiss() import unittest import time from selenium import webdriver from selenium.webdriver ...
  • <title>div+css+js实现弹出框 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> /*背景层*/ #popLayer { display: none; background-color: #B3B3B3; position: ...
  • web自动化笔记六:弹出框处理

    千次阅读 2022-01-28 09:43:30
    1、弹出框类型: 1)、alert 警告框 2)、confirm 确认框 3)、prompt 提示框 2、弹出框处理方法(方法三种弹出框操作都一样) `1)、获取弹出框对象: alert = driver.switch_to.alert 2)、调用 alert.text —>...
  • vant-Dialog 弹出框的用法

    千次阅读 2021-08-29 22:32:52
    1,dialog全局注册, 然后在UserEdit.vue这个页面使用 - 准备弹出输入框层 <!-- 姓名部分 --> <van-cell title="名称" is-link :value="profile.name" @click="showNameDialogFn" /> <!-- 修改...
  • 消息框--三种弹出框命令

    千次阅读 2019-11-06 19:01:27
    消息框–三种弹出框命令 根据所需自己选择 1:提示框 $(function () { $("#login").on("click",function(){ alite("密码错误"); }); }); 样式: 1:确认框 $(function () { $("#login").on("click",...
  • div+css+js实现弹出框

    万次阅读 多人点赞 2018-09-02 15:51:09
    面试被问到如何让弹出框居中,然而自己没有做过弹出框,搜资料,自己就试着做了一个。 效果:点击弹出框按钮后,页面上显示一个弹出框,并且背景要变成灰色,原始页面不能被操作的,直到关闭弹出框。 原理:在原...
  • 动态改变弹出框的内容

    千次阅读 2017-12-06 18:29:59
    在一个页面中相同功能的弹出框一个就够,多写就是浪费资源。接下来展示一种方法:<!--弹出框--> 温馨提示 <li></li> <li><p id="change">恭喜您!获得流量20M</p></li> <li><input type="button" value=
  • 在方法中设置,弹出框组件都是Future类型即promise对象 弹出框方法组件: showDialog( context: context, builder: (context){ return AlertDialog( title: Text('标题'), content:Text('内容')...
  • AdminLTE2的模态框(弹出框)

    千次阅读 2020-03-03 18:06:04
    刚好一个SSM练习项目中用到了这个弹出模态的设计 来记录一下 关于这个模态 找了很久 很多都不能用 后来自己去官网找了一段模态代码 亲测可用 先上模态代码: <div class="modal fade" id="modal-default...
  • 微信小程序开发弹出框实现方法

    千次阅读 2020-12-20 10:48:01
    本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家。消息提示框模态弹窗操作菜单1.消息提示——wx.showToast(OBJECT)//show.js//获取应用实例var app = getApp()Page({...
  • javascript的三种弹出框总结

    千次阅读 2018-11-30 19:44:41
    javascript有三种弹出框 1.alert() 这种弹出框比较好用,直接在页面提示信息,会出现一个确定的按钮,我们一般把它应用在显示提示性的信息,比如一些错误信息,或者是验证信息等 用法 window.alert("要输出...
  • 常用的微信小程序弹出框事件

    千次阅读 2019-07-06 10:36:56
    常用的小程序弹出框wx.showToast()wx.showLoading()wx.showModal() wx.showToast() 代码: wx.showToast({ title: ‘提示信息’, }) 参数: title:显示的提示信息,在没有图标的情况下,文本内容可显示两行 icon: ...
  • 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: [...
  • 消息提示模态弹窗操作菜单1.消息提示——wx.showToast(OBJECT)//show.js//获取应用实例var app = getApp()Page({showok:function() {wx.showToast({title: '成功',icon: 'success',duration: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 261,253
精华内容 104,501
关键字:

弹出框a