手写alert弹框(一)

采用原生的JavaScript,

html代码

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.div{
	border:4px dashed #ccc;margin:130px auto;
	text-align:center;
	font-size:25px;
	width:100px;
	height:100px;
	padding:40px;
}
</style>
<script src="alert.js"></script>
<div class="div" onclick="alert(‘hello javascript!‘)">点击我</div>

  

js代码

//自定义弹框
function alert(context,title){
	//创建弹框div
	var alertFram = document.createElement("div");
	alertFram.id="alertFram";
	alertFram.style="position: absolute; width: 280px; height: 150px; left: 50%; top: 50%; margin-left: -140px; margin-top: -110px; text-align: center; line-height: 150px; z-index: 300;";
	var strHtml=‘‘;
	strHtml+=‘<div style="list-style:none;margin:0px;padding:0px;width:100%">‘;
	strHtml+=‘	 <div id="alertFramTitle" style="background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white">[中奖提醒]</div>‘;
	strHtml+=‘	 <div id="alertFramContext" style="background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#fff">    100000     元</div>‘;
	strHtml+=‘	 <div style="background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;"><input type="button" value="确 定" onclick="doOk()" style="width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px"></div>‘;
	strHtml+=‘	</div>‘;
	alertFram.innerHTML = strHtml;
	//将弹框添加到页面末尾
	document.body.appendChild(alertFram);
	//title
	var alertFramTitle=document.getElementById("alertFramTitle");
	alertFramTitle.innerHTML = title || "[温馨提示]";//默认值
	//context
	var alertFramContext=document.getElementById("alertFramContext");
	alertFramContext.innerHTML = context || "";//默认值
}
//确定按钮
function doOk(){
	//移除弹框
	var x=document.getElementById("alertFram");
	x.remove();
}

  

优点:简单,非阻塞式弹框,依赖少(不需要jquery)

缺点:输入文本不能太长否则文字显示不全(因为大小固定),样式不好看(需要优化),代码修改起来困难(最好是使用面向对象的方式)

留坑,有待优化!!!

原文地址:https://www.cnblogs.com/1906859953Lucas/p/10843740.html

时间: 2024-10-11 08:33:31

手写alert弹框(一)的相关文章

selenium对Alert弹框的多种处理

Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert 常规处理,该方法只是对弹出的alert弹框进行了捕获和处理 @Test(enabled = false) public void ff1() { System.setProperty(key, value); driver = new ChromeDriver(); driver.get("file

操作JavaScript的Alert弹框

@Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input")); button.click(); try { //使用driver.switchTo().alert()方法获取Alert对象 Alert alert = driver.switchTo().alert(); Assert.assertEquals("这是一个Alert弹框", al

python小工具 - alert弹框输出姓名年龄、求和

使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinter的所有的包里面所有的内容 from tkinter import * import tkinter.messagebox as messagebox # 从Frame派生一个Application类,这是所有Widget的父容器 class Application(Frame): def __in

自定义alert弹框,title不显示域名

问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (function() { window.alert = function(name) { $(".tip").css("display", "block") $(".tip .content").html(name) } })() 调用:alert(name) 在页面中添加弹框元素,自定义其样式,默认隐藏

html 中手写阴影弹窗框封装

// 弹出提示框 function popup(pWidth,content) { $("#msg").remove(); var html ='<div id="msg" style="position:fixed;top:5%;width:100%;height:30px;line-height:30px;margin-top:-15px;"><p style="background:#000;opacity:0.

UIAlertController类--alert弹框3(文本对话框)

一.效果 二.实现 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [self alertTest3]; } /** *  文本对话框 */ - (void)alertTest3 { //1.创建UIAlertController UIAlertController *alertController = [UIAlertController alertControllerWithTitl

UIAlertController类--alert弹框2(Destructive “警示”)

一.效果 二.实现 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [self alertTest2]; } /** *  Destructive :“警示”样式 */ - (void)alertTest2 { //1.创建UIAlertController UIAlertController *alertController = [UIAlertController alertCont

简单的dialog,类似alert弹框

function alertPop(content){ $.dialog({ title:"提示", width:400, height:100, padding:'5px', content:content, lock:true, ok: function () { }, cancel: function () { }, okValue:"确定", cancelValue:"取消" }); }

ios UIWebView自定义Alert风格的弹框

之前开发过一个App,因为公司之前写好了网页版的内容和安卓版本的App,我进去后老板要求我ios直接用网页的内容,而不需要自己再搭建框架.我一听,偷笑了,这不就是一个UIWebView吗?简单! 但是,TMD(O^O)!事情并没有这么简单,要求我要与网页交互,首先就遇到了一个自定义网页弹框的问题,思想:找到网页弹框进行拦截,替换成自己写的弹框. 一.创建UIWebView的类别UIWebView+JavaScriptAlert 1.在.h中添加方法 -(void)webView:(UIWebVi