弹窗_弹窗代码 - CSDN
精华内容
参与话题
  • html实现弹窗

    万次阅读 多人点赞 2019-06-20 12:10:48
    上午闲来无事,用html及原生js写个弹窗,供参考。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ ...

    上午闲来无事,用html及原生js写个弹窗,供参考。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			body{
    				margin: 0px;
    			}
    			.zhezhao{
    				position: fixed;
    				left: 0px;
    				top: 0px;
    				background: #000;
    				width: 100%;
    				height: 100%;
    				opacity: 0.5;
    			}
    			.tankuang{
    				position: relative;
    				background: #fff;
    				width: 50%;
    				height: 80%;
    				border-radius: 5px;
    				margin: 5% auto;
    			}
    			#header{
    				height: 40px;
    			}
    			#header-right{
    				position: absolute;
    				width: 25px;
    				height: 25px;
    				border-radius: 5px;
    				background: red;
    				color: #fff;
    				right: 5px;
    				top: 5px;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<button type="button" onclick="dianwo()">点我</button>
    		<div class="zhezhao" id='zhezhao'>
    			<div class="tankuang">
    				<div id="header">
    					<span>我是弹窗</span>
    					<div id="header-right" onclick="hidder()">x</div>
    				</div>
    			</div>
    		</div>
    		<script type="text/javascript">
    			document.getElementById('zhezhao').style.display="none";
    			function dianwo(){
    				document.getElementById('zhezhao').style.display="";
    			}
    			function hidder(){
    				document.getElementById('zhezhao').style.display="none";
    			}
    		</script>
    	</body>
    </html>
    
    

    代码可直接拿来用,不足请指出。

    展开全文
  • 弹窗的几种方式

    2019-09-29 14:49:53
    弹窗的几种方式 (苹果原生) UIAlertView : 从中间弹出来(9.0以后过期了) 实现代码如下: // 方式一:(9.0过期了) UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"BabyWong的标题" message:@...

    弹窗的几种方式 (苹果原生)

    • UIAlertView : 从中间弹出来(9.0以后过期了)

    806461-20151121162621983-971076795.png

    • 实现代码如下:
    // 方式一:(9.0过期了)
    
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"BabyWong的标题" message:@"BabyWong的内容" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    
        // 一定要调用show方法
        [alertView show];
    
    • UIActionSheet : 从底部弹出来(9.0以后过期了)

    806461-20151121162639968-875606099.png

    • 实现代码如下:
     // 方式二:(9.0过期了)
        UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"BabyWong的标题" delegate:nil cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButtonTitles:@"其他", nil];
    
        // 一定要调用show方法
        [sheet showInView:self];
    
    • UIAlertController == UIAlertView + UIActionSheet 主流弹窗方式8.0开始可以使用,更灵活,,可以选择弹窗样式(中间 / 底部)

    806461-20151121162719765-1690853076.png

    • 实现代码如下:
    
       UIAlertController *controller = [UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
    
        [controller addAction:[UIAlertAction actionWithTitle:@"收藏" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            WWLog(@"点击了收藏按钮");
        }]];
    
         [controller addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
             WWLog(@"取消");
         }]];
    
        [controller addAction:[UIAlertAction actionWithTitle:@"举报" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
            WWLog(@"点击了[举报]按钮");
        }]];
    
    // 一定要手动modal出来
        [self.window.rootViewController presentViewController:controller animated:YES completion:nil];
    
    • Posted by 博客园·BabyWong
    • 原创文章,版权声明:自由转载-非商用-非衍生-保持署名BabyWong
    • 邮箱 wenmeiwong520@gmail.com

    转载于:https://www.cnblogs.com/WMHaa/p/4983984.html

    展开全文
  • JS弹窗的三种方式

    万次阅读 2017-04-17 10:30:50
    JS弹窗的三种方式 //第一种 function f1(){ alert("这是第一种弹窗alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变"); } //第二种 function f2(){ var flag = confirm("这是第...
    <!DOCTYPE html>
    <html>
      <head>
        <title>JS弹窗的三种方式</title>
        <meta charset="utf-8"/>
        <script type="text/javascript">
          //第一种
          function f1(){
        	alert("这是第一种弹窗alert,单击确定后才能进行下一步的操作,只是提醒,不能对脚本产生任何改变");
          }
          //第二种
          function f2(){
        	var flag = confirm("这是第二种弹窗confirm单击确定返回true,单击取消返回false");
        	if(flag){
        	  alert("你点击的是确定");
        	}else{
        	  alert("你单击的是取消");	
        	}
          }
          //第三种
          function f3(){
        	//将输入的内容赋给变量name
        	var name = prompt("请输入你的名字:","");
        	//这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值
        	//若点击取消按钮,则返回值为null,类型为object
        	//若点击确认按钮,则返回值为输入的字符串(不输入时为空字符串),类型为string
        	console.log(name);
        	console.log(typeof(name));
        	if("王庆" === name){
              alert("欢迎您:"+name);
        	}else{
        	  alert("输入有误!");
        	}
          }
        </script>
      </head>
      <body>
        <button οnclick="f1();">alert</button>
        <button οnclick="f2();">confirm</button>
        <button οnclick="f3();">prompt</button>
      </body>
    </html

    展开全文
  • js三种弹窗介绍

    万次阅读 2018-10-11 14:38:55
    alert,confirm,prompt三种弹窗介绍 三种弹框在系统中都是同步执行的,也就是说,三种弹框中的任一弹框弹出,代码都不在执行,直到点击确认或取消,关闭弹窗后,代码继续执行。 1、alert()提示...

    alert,confirm,prompt三种弹窗介绍

    三种弹框在系统中都是同步执行的,也就是说,三种弹框中的任一弹框弹出,代码都不在执行,直到点击确认或取消,关闭弹窗后,代码继续执行。


    1、alert()提示框

    **用途:**一般用于提示信息或者警告信息的展示。

    代码展示:

    alert("给程序媛请安~~~")//结果展示如下图
    

    图片展示:
    alert()弹框示例

    2、confirm(option)‘确认’或‘取消’消息框

    **用途:**用户点击“确定”或“取消”按钮时,弹窗会返回一个布尔值。确认返回true,取消返回false,由此可以判断用户的操作。

    option1:数据类型是字符串;是弹框里的提示文字

    代码展示:

    var isbeauty=confirm("亲爱的程序媛,you are so beautiful?");
    //返回一个布尔值,点击确定返回true,点击取消返回false
    

    图片展示:
    这里写图片描述

    用户多次点击取消,取消按钮消失,弹框中添加一个“关闭网页”按钮

    3、prompt(option1[,option2])输入框

    **用途:**用户可以在弹框输入字符串,点击确认后,弹窗会返回输入框内的字符串。

    option1:数据类型是字符串;是弹框里的提示文字。
    option2:数据类型是字符串;是弹框里输入框的value预留值,第二个参数为空时,弹框输入框中的值为空。

    代码展示:

    var Response1 = prompt("程序媛,你喜欢我吗?","喜欢");
    console.log(Response1)//返回值是输入的字符串
    
    var Response2 = prompt("浩瀚的代码世界欢迎您~,请留下您的足迹");
    console.log(Response2)
    

    图片展示:
    这里写图片描述
    这里写图片描述
    自己学习时作为记录,如有错误感谢指出~~

    展开全文
  • HTML弹窗

    千次阅读 2019-07-04 14:32:49
    HTML弹窗弹窗一直在浏览器居中弹窗显示时其它界面为灰色且不可点击 弹窗一直在浏览器居中 #addForm{ opacity:0; position:fixed; *position:absolute; width:30%; height:250px; top:50%; left:3...
  • 弹窗

    2019-07-12 12:57:06
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <hea...
  • 网页中弹出窗口

    2019-06-26 22:29:19
    <...<HEAD><TITLE>弹出窗口</TITLE> ...SCRIPT LANGUAGE="JScript">//建立一个弹出窗口var oPopup = window.createPopup();...//得到这个弹出窗口的bodyvar oPopupBody = oPopup.document.body;...
  • 【1、最基本的弹出窗口代码】 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') -->... 因为着是一段javascripts代码,所以它们应该放在<...标签和&...
  • 解决Flash弹窗广告

    万次阅读 多人点赞 2020-03-13 13:18:31
    本人下了一个flash(可能不是从官网)安装后日常弹...的进程,右键打开所在文件夹,发现是在Flash目录中,而后关闭此弹窗,发现该进程从任务管理器消失。因此基本锁定该进程就是弹窗广告 接下来在Flash目录中打算将其删除
  • 然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件。 本文主要内容会涉及到弹窗遮罩的实现,slot插槽的使用方式,props、$emit传参,具体组件代码也传上去了。如果喜欢...
  • 模态弹窗与非模态弹窗

    千次阅读 2018-07-22 13:53:32
    在手机app应用中各种格式的弹窗效果相信大家都看过,也可能反感过某些弹窗,本文就来谈谈关于app弹窗设计以及弹窗的适用情景。 一、弹窗的定义 1、弹窗作用 弹窗是为了让用户回应,需要用户与之交互的窗口。 非...
  • 在写网页功能交互时,经常会用到弹窗,但是用户常常希望用完弹窗里的功能后,弹窗可以自动隐藏,因此,学会使用一个隐藏弹框的js特效,是非常有必要的。 我们希望的是,我们再操作弹窗(点击或聚焦在弹窗的范围内)...
  • 超级实用的软件加弹窗工具v1.0 软件加弹窗工具是一款可以帮助用户在可执行文件EXE中加弹窗的工具,只要运行EXE程序就会弹出用户设置的网站,该工具内置了三种方案供用户选择,用户可以根据自己的喜好选择加弹窗的...
  • android实现弹窗和自定义弹窗

    千次阅读 2017-03-15 14:04:47
    在安卓中我们有时候要实现弹窗的功能,实现弹窗有很多种实现的方法,有用系统默认的弹窗弹出窗口,但是有很多时候默认的弹窗满足不了我们,在这里我主要讲解两种自定义弹窗的方法和一种默认弹窗效果。1、 首先我们来...
  • 弹窗处理 Javascript弹窗 Javascript中有3种弹窗:alert(只有一个确认按钮)、confirmation(有确认和取消两个按钮供选择)、prompt(需要输入内容)。 无法使用selenium提供的find_element_by_xx()定位到alert...
  • 一、弹窗类型 一般说到selenium中的弹窗包括以下三种类型: 类型一:窗口柄 这种窗口常说的就是窗口句柄,其实并不能算弹窗,应该属于窗口切换 类型二:web弹窗 使用如下命令导致的: browser = webdriver.Firefox...
  • layer点击自定义按钮关闭对应的弹窗...这样就可以实现你想关闭的任何一个弹窗,只需对应变量名即可,layer.close(变量名) <script> // 定义变量名 var LayIndex; // 点击定义的弹窗按钮弹出弹窗 $("#Btn")
  • 我也是刚学自动化,在自学过程中发现浏览器中有一些弹窗元素,无法定位。经过自己的摸索,有一些心得,写下来供日后自己回顾。 首先要确定弹窗的类型: (1)div弹窗 (2)新标签页弹窗 (3)alert弹窗 一...
  • vue的弹窗(多级弹窗)研究心得

    千次阅读 2019-04-19 02:38:25
    在vue开发中弹窗用的次数比较多,例如添加修改页面常用,个人习惯把弹窗例如添加组件当成列表组件中的子组件进行引入,所以一定要把弹窗脚本写在子组件中,通过子组件的v-if语句进行控制,在弹窗的子组件关闭事件中...
  • 弹窗炸弹及其解除

    万次阅读 2018-11-08 17:00:26
    简单三行代码就可以实现无限弹窗,快学会了去整蛊哟,嘿嘿嘿 新建一个记事本输入以下代码 :start start cmd goto start 保存,然后将文本的后缀txt改为bat就好了。这样弹窗炸弹就制作好了,当然还可以将它进行...
1 2 3 4 5 ... 20
收藏数 113,825
精华内容 45,530
关键字:

弹窗