【JQuery】控件-实现自定义样式的弹出窗口和确认框

最新推荐文章于 2024-04-02 11:04:39 发布

Alex_冲动是魔鬼

最新推荐文章于 2024-04-02 11:04:39 发布

阅读量3.5k

点赞数

分类专栏： jquery js 文章标签： html jquery css3 dom 控件

本文链接：https://blog.csdn.net/pl565304112/article/details/70020496

版权

本文展示了如何使用jQuery实现自定义样式的弹出窗口和确认框。通过提供HTML、CSS和JavaScript代码示例，创建了带有不同按钮（单按钮和双按钮）的弹出框，并详细解释了各个部分的实现方法，包括窗口大小调整、DOM元素初始化、按钮创建等功能。

摘要由CSDN通过智能技术生成

 
 单按钮： 

 
 双按钮： 

 
  Html代码： 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js alert confirm样式弹出框</title>
<link type="text/css" rel="stylesheet" href="css/showBo.css" />
<script type="text/javascript" src="js/showBo.js"></script>
</head>
<body >
<div id="wrap">
	<div class="box-163css">
		<input type="button" value="Showbo.Msg.alert" οnclick="Showbo.Msg.alert('您好，请先注册或登录!')">
		<input type="button" value="Showbo.Msg.confirm" οnclick="Showbo.Msg.confirm('您确定删除这条记录吗？')">
	</div>
</div>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>
</body>
</html>

 
  js代码： 
 

var Showbo={author:'showbo',homepage:'http://www.lenomC100.com'};  
//是否为ie浏览器  
Showbo.IsIE=!!document.all;  
//ie浏览器版本  
Showbo.IEVersion=(function(){if(!Showbo.IsIE)return -1;try{return parseFloat(/msie ([\d\.]+)/i.exec(navigator.userAgent)[1]);}catch(e){return -1;}})();  
//按id获取对象  
Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;}  
//按标签名称获取对象  
//页面的高和宽******************************  
Showbo.isStrict=d

最低0.47元/天解锁文章

Alex_冲动是魔鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】控件-实现自定义样式的弹出窗口和确认框

单按钮：双按钮：Html代码：js alert confirm样式弹出框适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.js代码：var Showbo={author:'showbo',homepage:'http://www.le
复制链接

扫一扫

专栏目录