时间:2021-05-26
javascript自定义提示窗口效果图:
源码:
1.demo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>自定义提示窗口</title> <script type="text/javascript" src="js/myAlert.js"></script> <script type="text/javascript"> function bodyOnload() { var myInput = document.getElementById("myInput"); myInput.style.border = "none"; myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)"; myInput.value = "请输入你的名字:"; myInput.onfocus = function () { myInput.style.outline = "none"; myInput.value = ""; }; var image_div = document.createElement("div"); image_div.style.width = myInput.offsetHeight ; image_div.style.height = myInput.offsetHeight; image_div.style.float = "right"; image_div.style.cursor = "pointer"; image_div.onclick = function () { new MyAlert().alert("系统提示","click the image_div",5000); }; var outer_div = document.createElement("div"); outer_div.style.border = "1px solid red"; outer_div.style.width = parseInt(myInput.offsetWidth) + parseInt(image_div.style.width); outer_div.style.height = myInput.offsetHeight; document.body.appendChild(outer_div); outer_div.appendChild(myInput); outer_div.appendChild(image_div); } </script></head><body onload="bodyOnload()"> <input id="myInput" type="text" name="name" title="名字"/></body></html>2.myAlert.js
/** * Created by zhuwenqi on 2017/6/20. *//** * @param options 基本配置 * @constructor */function MyAlert(options) { this.options = options ;}/** * 提示窗口 * @param title 提示标题,默认为"" * @param content 提示内容,默认为"" * @param closeTime 提示窗口自动关闭时间,单位为ms,默认为2000ms */MyAlert.prototype.alert = function (title,content,closeTime) { var div_background = document.createElement("div"); div_background.style.position = "absolute"; div_background.style.left = "0"; div_background.style.top = "0"; div_background.style.width = "100%"; div_background.style.height = "100%"; div_background.style.backgroundColor = "rgba(0,0,0,0.1)"; div_background.style.zIndex = "1001"; var div_alert = document.createElement("div"); div_alert.style.position = "absolute"; div_alert.style.left = "40%"; div_alert.style.top = "0"; div_alert.style.width = "20%"; div_alert.style.height = "20%"; div_alert.style.overflow = "auto"; div_alert.style.backgroundColor = "rgba(255,255,255,0.5)"; div_alert.style.zIndex = "1002"; div_alert.style.border = "1px solid blue"; div_alert.style.borderRadius = "10px"; div_alert.style.boxShadow = "0 0 10px gray"; var div_title = document.createElement("div"); div_title.style.backgroundColor = "rgba(0,255,0,0.3)"; div_title.style.textAlign = "center"; var span_title = document.createElement("span"); span_title.style.fontSize = "20px"; span_title.style.fontWeight = "bold"; var text_title = document.createTextNode((title === undefined || title === null) ? "" : title) ; span_title.appendChild(text_title); div_title.appendChild(span_title); div_alert.appendChild(div_title); var div_content = document.createElement("div"); div_content.style.lineHeight = "35px"; div_content.style.paddingLeft = "10px"; var span_content = document.createElement("span"); var text_content = document.createTextNode((content === undefined || content === null) ? "" : content); span_content.appendChild(text_content); div_content.appendChild(span_content); div_alert.appendChild(div_content); document.body.appendChild(div_background); document.body.appendChild(div_alert); setTimeout(function () { document.body.removeChild(div_alert); document.body.removeChild(div_background); },(closeTime === undefined || closeTime === null || closeTime === "") ? 2000 : closeTime);};以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前置条件:熟悉使用Javascript+HTML5+css3。理解ES2015Module模块(export、import、export-default)。了解
前置条件:熟悉使用Javascript+HTML5+css3。理解ES2015Module模块(export、import、export-default)。了解
自定义语法高亮,支持HTML,XML,CSS,JavaScript,VBScript,ASP,PHP,CSS,Perl/CGI,C/C++,C#,Java,VB
简介用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为。如图:Javascript代码复制代码代码如下:$(function(
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义。继承自定义窗口的类xaml文件的根节点就不再是,而是自定义窗口类名(若自定义窗口与继承