html简单组件（二）：简洁弹窗

最新推荐文章于 2024-02-04 15:50:50 发布
最新推荐文章于 2024-02-04 15:50:50 发布
阅读量1.6w 收藏 40
点赞数 10
分类专栏： HTML简单组件 文章标签： html css js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26666947/article/details/111996704
版权

html简单组件（二）：简洁弹窗

代码实现效果图为：
在这里插入图片描述

html代码

		<div>
			<button class="btn" onclick="show()">点击弹窗</button>
			<!-- 弹窗遮罩层 -->
			<div class="dialog">
			  <!-- 弹窗内容 -->
			  <div class="content">
				<div class="aclose">
					<span>标题</span>
					<a class="close" href="javascript:close();">&times;</a>
				</div>
				<div class="contain">
					弹窗具体内容
				</div>
			  </div>
			
			</div>
			
		</div>

jquery代码

		function show(){
				var show = $(".dialog").css("display");
				$(".dialog").css("display",show =="none"?"block":"none");
			}
			function close(){
				var show = $(".dialog").css("display");
				$(".dialog").css("display",show =="none"?"block":"none");
			}
		}

CSS样式

css样式单独为文件引用，文件名为：dialog.css

.btn {
	width: 200px;
	height: 50px;
	font-size: 20px;
	color: white;
	background-color: #006DCC;
	border: 0px;
	border-radius: 10px
}
.btn:hover {
	box-shadow: 0 0 5px 5px darkgray;
}

.dialog {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.content {
	width: 500px;
	height: 300px;
	margin: 100px auto;
	background-color: #fefefe;
	border-radius: 10px;
	box-shadow: 0 0 5px 5px darkgray;
}
.aclose{
	width: 500px;
	height: 60px;
	text-align: center;
}
.aclose span{
	line-height: 70px;
	font-size: 26px;
	font-weight: 700;
}
.contain{
	width: 500px;
	height: 230px;
	font-size: 20px;
	margin-top: 10px;
	text-align: center;
}

.close {
	color: #aaa;
	float: right;
	margin-right: 15px;
	font-size: 40px;
	font-weight: bold;
	text-decoration: none;
}

html+jquery+css整合代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html+jquery弹窗</title>
		<link rel="stylesheet" type="text/css" href="css/dialog.css">
		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<button class="btn" onclick="show()">点击弹窗</button>
			<!-- 弹窗遮罩层 -->
			<div class="dialog">
			  <!-- 弹窗内容 -->
			  <div class="content">
				<div class="aclose">
					<span>标题</span>
					<a class="close" href="javascript:close();">&times;</a>
				</div>
				<div class="contain">
					弹窗具体内容
				</div>
			  </div>
			
			</div>
			
		</div>
	
		<script type="text/javascript">
			function show(){
				var show = $(".dialog").css("display");
				$(".dialog").css("display",show =="none"?"block":"none");
			}
			function close(){
				var show = $(".dialog").css("display");
				$(".dialog").css("display",show =="none"?"block":"none");
			}
		</script>
	</body>
</html>

完整资源下载地址为：https://download.csdn.net/download/qq_26666947/13990507

一方通行00
关注
  • 10
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
dcat-admin：使用很少的代码快速构建一个功能完善的高颜值后台系统，内置丰富的后台常用组件，开箱即用，让开发者告别大量HTML代码，基于Laravel Admin实现
01-28
Dcat Admin是一个基于二次开发并开发的后台系统构建工具，只需很少的代码即可快速构建出一个功能完善的高颜值后台系统。内置丰富的后台常用组件，开箱即用，让开发者告别扩展杂种HTML代码，对扩展开发者非常友好。 关于官网备案暂停访问的公告 大家好， 合并备案中，在备案期间会场关闭网站访问，直到备案完成。在此期间大家可以通过查看文档，给大家带来的不便之处敬请谅解，谢谢支持！ 截图 功能特性 简洁优雅，灵活可扩展的API 用户管理 RBAC权限管理，支持无限极权限中断 菜单管理 使用pjax建立无刷新页面，支持按需加载静态资源，可以无限扩展组件而不影响整体性能 松散的页面重建与数据操作设计，可轻松切换数据源 自定义页面 自定义主题配色 多主题切换功能，内置多种主题色 可轻松打造无菜单栏的独立页面（如可用于内置弹窗选择器等功能） 插件功能 可视化代码生成器，可根据数据表一键生成增删改改查页面 数据表格编制工具，内置丰富的表格常用功能（如组合表头，数据导出，搜索，快捷方式创建，批量操作等） 树状表格功能内置工具，支持分页和点击加载 数据表单开发工具，内置丰富的表单类型，支持表单初始提交 分
网页实现自动弹窗
许三金的博客
09-06 776
上面的代码创建了一个按钮，当用户点击按钮时，弹窗显示一个自定义表单。用户可以在表单中输入姓名和邮箱，并点击提交按钮。你可以在JavaScript部分处理表单的提交，例如将数据发送到服务器，或执行其他你需要的操作。如果你想在弹窗内显示一个自定义表单，你可以使用HTML和JavaScript来实现。请注意，这只是一个基本示例，你可以根据需要自定义表单的字段和行为。// 在这里处理表单数据，例如将数据发送到服务器或执行其他操作。// 当表单提交时，可以在这里处理表单数据。// 当按钮被点击时，显示弹窗。
点击按钮打开自定义iframe弹窗
最新发布
东西山海关
02-04 1004
点击按钮打开弹窗： 打开弹窗后：
HTML + DIV +JS 实现弹窗加遮罩层
qq_45224062的博客
05-12 711
【代码】HTML + DIV +JS 实现弹窗加遮罩层。
html点击出现表单弹窗
lplovewjm的博客
04-22 6975
在系统中，点击某个按钮如何弹出一个**表单弹窗**并且设置**遮罩层**，如下图所示。
使用html、css、js制作一个简单且草率的弹出提示框
Z_B_L的博客
09-09 3647
对于刚接触html5和css3的新手来说，alert弹出窗弊端不仅会阻止程序的执行，并且看起来十分简陋，不美观，视觉效果和实用性都不好，所以今天我将为大家展示：如何使用html和css、js制作一个简单的弹出窗。（ps：本篇为纯新手打造，恳请大佬多多批评）首先是html结构，一个弹窗，一个按钮。然后是css，设置背景，弹窗样式。根据个人需要可调整弹窗的事件。
浏览器原生html弹窗、面板、事件、dialog
“代码农”微信公众号
09-05 2362
浏览器原生html弹窗、面板、事件、dialog。
html弹窗
m0_74012486的博客
11-14 2157
点关注
[转]html实现弹窗的实例
IceFlame的博客
07-26 1万+
html实现弹窗的实例
html 弹窗
Mike_lucy的博客
04-25 952
页面代码+css样式设置。
写一个HTML弹窗
hexianfan的博客
02-17 3303
带复选框的html弹窗
Ug(jQuery弹出层插件) 1.2.rar
05-28
Ug，一个轻量级的js组件、web弹窗（层）解决方案 。简洁的代码、灵活的自定义，您只需简单地调用，即可轻松实现各种弹出效果。 尽可能地以更少的代码展现出更强健的功能，让您的页面拥有更丰富与便捷的UI体验。
前后台管理系统模板源代码 java语言 ssh开发框架 Spring+Struts+Hibernate
02-15
开发技术：Spring3.2，Struts2.3，Hibernate3，bootstrap样式，bootstrap脚本，jquery脚本，layer弹窗组件，ueditor富文本框，webuploader文件上传组件，echarts图表展示组件等技术； 二、项目说明 本系统实现了...
蝉知企业门户系统 v7.2
08-14
12、完成区块编辑的弹窗样式及页面布局 13、完成布局页面区块分组内容及页面样式 14、完成外观编辑仅针对于全局页面生效的功能 15、实现可视化编辑页面页面 模板项可收起的操作 16、重构可视化编辑页面的页面布局及...
我记录　内容管理系统 CMS源码
05-04
我记录的缓存组件和配置组件，全部使用 json 进行持久化，是系统的重要组成部分。 wojilu ajax 1、提供了最常用的弹窗、表单验证、菜单等内容； 2、基本上“零js书写”，不需要js基础就能使用，上手非常容易； ...
html简单组件（三）：简洁美观的搜索框
热门推荐
一方通行的博客
12-30 1万+
html+jquery简洁美观的搜索框 搜索框效果图： HTML代码： <div class="main"> <div class="pannel-div search"> <input type="text" class="in" id="in" placeholder="请输入查询内容" /> <button class="btn_search" onclick="showInput()">搜索</button>
html简单组件（一）：最简单的右侧导航栏
一方通行的博客
12-29 1万+
html+jquery+CSS实现最简单的右侧导航栏效果 一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo 最简单的效果图 废话不多说，直接上代码 html+jquery代码 html主代码 <div class="mobile-nav"> <ul> <li class="nav_menu"><a onclick="change(1)">首页</a></li> <li cla
html简单组件（四）：滚动条显示隐藏和更改滚动条样式
一方通行的博客
01-06 8002
HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式 实现效果图： HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item
jquery点击弹窗提示
08-06
### 回答1： 你可以通过以下代码来实现点击弹窗提示： HTML代码： ```html <button id="myBtn">点击我</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个弹窗提示！</p> </div> </div> ``` CSS代码： ```css .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` jQuery代码： ```javascript $(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").css("display", "block"); }); $(".close").click(function(){ $("#myModal").css("display", "none"); }); }); ``` 这段代码在页面加载后，会为 `#myBtn` 元素添加一个点击事件。当点击按钮时，会将 `#myModal` 元素的 `display` 属性设置为 `block`，从而显示弹窗提示。 同时，点击弹窗提示中的 "x" 图标，会将 `#myModal` 元素的 `display` 属性设置为 `none`，从而隐藏弹窗提示。 ### 回答2： 使用jQuery可以很方便地实现点击弹窗提示的效果。首先，我们需要在HTML页面中引入jQuery库，然后使用jQuery选择器选中需要绑定点击事件的元素。 例如，我们可以使用以下代码实现点击按钮弹窗提示的效果： ``` <html> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("你点击了按钮！"); }); }); </script> </head> <body> <button>点击我弹窗提示</button> </body> </html> ``` 上述代码中，首先在`<head>`标签内引入了jQuery库，并在`<script>`标签内通过`$(document).ready(function(){})`函数确保在页面加载完成后执行JavaScript代码。 然后，使用`$("button")`选择器选中了所有的`<button>`元素，并在`click()`函数内绑定了点击事件。当按钮被点击时，会执行函数内的代码，这里使用`alert()`函数弹窗显示提示信息。 这样，当页面加载完成后，点击按钮时就会弹出提示窗口，告诉用户按钮已经被点击了。 当然，我们还可以使用其他的方法来实现更复杂的弹窗提示效果，例如使用jQuery UI库中的弹窗组件，或者自定义样式和动画效果来展示弹窗提示。但以上是基本的实现方式，适用于简单的提示需求。 ### 回答3： jQuery是一个快速、简洁的JavaScript库，提供了很多方便的方法来处理网页操作。如果想在点击事件发生时弹出提示框，可以使用jQuery的事件绑定方法和弹窗方法来实现。 首先，在HTML中定义一个按钮元素，用于触发点击事件： <button id="myButton">点击我</button> 然后，在JavaScript中使用jQuery来绑定点击事件，当按钮被点击时，触发一个函数来弹出提示框： $(document).ready(function(){ $("#myButton").click(function(){ alert("您点击了按钮！"); }); }); 在这个例子中，我们使用了jQuery的.ready()函数，在文档加载完成后执行一个函数。在这个函数中，我们使用了.click()方法来绑定点击事件，当按钮被点击时，会触发一个函数。在这个函数中，我们使用了alert()方法来弹出一个提示框，其中包含了一个消息文字。 当点击按钮时，就会出现一个提示框，显示"您点击了按钮！"的消息。这样就实现了点击弹窗提示的功能。 需要注意的是，为了能够正确使用jQuery，需要在HTML中引入jQuery库的文件，例如： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> 通过以上的步骤，就可以实现通过jQuery点击弹窗提示的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值