漂亮实用的提示框

最新推荐文章于 2024-03-10 13:49:39 发布
chenghaibing2008 最新推荐文章于 2024-03-10 13:49:39 发布
阅读量8.5k 收藏 10
点赞数
分类专栏： 网络技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/chenghaibing2008/article/details/52034423
版权
网络技术 专栏收录该内容
115 篇文章 1 订阅
订阅专栏 












<style>
.demo{width:300px; margin:60px auto 10px auto}


button, .button {
  background-color: #AEDEF4;color: white;border: none;box-shadow: none;
  font-size: 17px;font-weight: 500;font-weight: 600;
  border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>




<div id="main">
            <div class="demo">
                <div class="demo_1">
                    基本示例：<button>点击这里</button>
                </div>
                <div class="demo_2">
                    提示成功：<button>点击这里</button>
                </div>
                <div class="demo_3">
                    提示失败：<button>点击这里</button>
                </div>
                <div class="demo_4">
                    提示确认：<button>点击这里</button>
                </div>
                <div class="demo_5">
                    定义内容：<button>点击这里</button>
                </div>
                <div class="demo_6">
                    确认输入：<button>点击这里</button>
                </div>
            </div>
        </div>



<script>
$(function(){
	$(".demo_1 button").click(function(){
		swal("这是一个信息提示框!");
	});
	$(".demo_2 button").click(function(){
		swal("Good!", "弹出了一个操作成功的提示框", "success");
	});
	$(".demo_3 button").click(function(){
		swal("OMG!", "弹出了一个错误提示框", "error");
	});
	$(".demo_4 button").click(function(){
		 swal({
			title: "您确定要删除吗？", 
			text: "您确定要删除这条数据？", 
			type: "warning",
			showCancelButton: true,
			closeOnConfirm: false,
			confirmButtonText: "是的，我要删除",
			confirmButtonColor: "#ec6c62"
			}, function() {
				$.ajax({
					url: "do.php",
					type: "DELETE"
				}).done(function(data) {
					swal("操作成功!", "已成功删除数据！", "success");
				}).error(function(data) {
					swal("OMG", "删除操作失败了!", "error");
				});
			});
	});
	
	$(".demo_5 button").click(function(){
		swal({   
			title: "Good!",   
			text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',   
			imageUrl: "images/thumbs-up.jpg",
			html: true,
			timer: 5000,   
			showConfirmButton: false
		});
	});
	
	$(".demo_6 button").click(function(){
		swal({   
			title: "输入框来了",   
			text: "这里可以输入并确认:",   
			type: "input",   
			showCancelButton: true,   
			closeOnConfirm: false,   
			animation: "slide-from-top",   
			inputPlaceholder: "填点东西到这里面吧" 
		}, function(inputValue){   
			if (inputValue === false) return false;      
			if (inputValue === "") {     
				swal.showInputError("请输入!");     
				return false   
			}      
			swal("棒极了!", "您填写的是: " + inputValue, "success"); 
		});
	});
});
</script>




jquery.confirm 漂亮的弹出确认框插件
05-12
内容索引:脚本资源,jQuery,jquery.confirm,确认提示　　jquery.confirm 漂亮的弹出确认框插件，当你关闭时，会弹出一个漂亮的提示框，询问你是否真的要关闭它吗？这是来自jQuery的一款专用插件，符合新型的W3C WEB标准，更具人性化，更好的操作体验，绝非JavaScript的Alert。
html好看的预约界面设计,35个漂亮的网页弹框设计
weixin_35970228的博客
06-09 1957
小编：弹框是一种交互方式，用作提醒，做决定或者解决某个任务，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。现在弹框越来越被设计师关注，如何做出更美体验更好的弹框？接下来我们就一起看一看别人设计的漂亮的弹框。OverlayPop-UpPop-UpPop Up WindowPop UpPop-UpPopup OverlayPop-Up / OverlayDaily ...
css + js 超好看的消息提示
二十春夏
03-22 1112
先看图 css 使用了layui，直接在官网下载引入即可 实现的功能 自定义消息弹出位置 自定义消息类型 自定义消息关闭时间 消息弹出关闭动画 <style> .message { width: 300px; /* background-color: rgba(0, 0, 0, 0.2); */ background-color: rgba(255, 255, 255, 0.7); animation: fadeIn 0.5s ease-
推荐一款优秀的提示框插件：PoshyTip
最新发布
gitblog_00003的博客
03-10 381
推荐一款优秀的提示框插件：PoshyTip 如果你在开发Web应用时需要一个优雅、易用的提示框插件，那么不妨试试PoshyTip。 什么是PoshyTip？ PoshyTip是一款轻量级的jQuery插件，用于创建美观的提示框。它提供了多种主题样式和自定义选项，可以轻松地为你的Web应用添加提示信息。 PoshyTip能用来做什么？ PoshyTip主要用于显示提示信息，包括简单的文本提示、带有H...
QT-自定义消息提示框，好看大气
u013083044的博客
03-13 1098
原生的QT提示框总是让人觉得难以接受，因此特定重新封装一个类来替换原生的，使用过程跟原生的一致，使用比较方便。
jquery 实现漂亮的confirm弹出框
hffyyff的博客
11-08 1143
jquery 实现漂亮的confirm弹出框
flavr——好看的jQuery对话框
weixin_43952978的博客
03-26 501
flavr描述 flavr是一款时尚的弹出对话框，样式比较好看，使用了流行的animate.css动画，flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。 flavr特点 1.清洁和现代平面设计 2.充分响应 3.轻量级的、功能强大的 4.基于Bootstrap 开发 5.CSS3动画在现代浏览器 6.jQuery提供动力 7.跨浏览器支持 flavr的使用 ...
漂亮的js消息确认框
de1128的专栏
12-10 161
代码 1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="http://www.w3.org/1999/xhtml">3&...
漂亮实用的提示框插件SweetAlert
10-30
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
好看的确认框样式xcConfirm
09-19
一个好看的确认框样式，xcConfirm，包括确认、信息、疑问、警告等多种图标，可以自定义提示信息，可以自定义按钮名称、点击按钮触发的方法，兼容IE7及以上、主流浏览器。
好用的漂亮提示框,js提示框
04-08
好用的漂亮提示框，比起系统自带的提示框要好看许多，大家可以尝试下
非常漂亮的JS提示框
06-04
1、解决了select的IE6BUG； 2、很好的用的，项目中使用的； 3、可以自己调颜色
几种漂亮的CSS3提示框样式.rar
07-10
收集几种漂亮的CSS3提示框样式，带图标的提示框，可直接用于移动开发中。这些提示框的特点 ： 　　1、圆角风格； 　　2、提示框右侧都带有图标，视觉效果好。 　　3、可无损移植到智能移动设备、手机上运行。
好看好用的alert提示框
09-01
组件名称：ymPrompt消息提示组件 2.0 =============================================================================== 组件说明：在web开发中，对于浏览器默认的消息提示框（如alert,confirm等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 =============================================================================== 组件功能介绍： 1、调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。 2、兼容IE6.0+、FF1.5+、Opear9+（在Opear下显示有一个小缺陷），兼容HTML4/XHTML1.0页面渲染模式。 3、完全的CSS皮肤定制功能，所有外观包括显示图标/关闭按钮等都可以通过css设置。目前提供了五种皮肤，Vista、QQ、dmm-green、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并关闭后该select仍保持隐藏状态，而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作（包括F5），“消息确认框”支持“tab键/左右方向键”切换确定/取消焦点。 8、可以页面加载的任意时间调用，如页面初始化时调用，页面加载完成后调用。 9、支持通过JSON和传统的参数传入方式。如ymprompt.alert('消息内容',300,200,'消息标题',handler)和ymprompt.alert({message:'消息内容',width:300,height:200,title:'消息标题',handler:handler})，这两种写法是等价的。 10、只需要一个回调函数，可捕获确定、取消及关键按钮的点击事件。函数改变了1.0版需要对确定和取消按钮分别写回调函数及不支持关闭事件的缺陷， 11、完全的封装，对外只暴露一个ymPrompt变量，有效防止与使用者程序变量的冲突。 12、程序(js)与样式(css)的完全分离，取消了1.0中自动加载css的功能，用户可根据需要加载对应css样式表单，降低了对样式配置的复杂度。
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
10-22
主要介绍了jQuery实现漂亮实用的商品图片tips提示框效果,具有鼠标滑过显示动态提示框的效果,涉及针对鼠标事件的响应及页面元素动态操作技巧,需要的朋友可以参考下
漂亮实用的自定义对话框 登录框源码及Demo
12-12
漂亮的自定义对话框，可以更改标题头和内容，还可以改遮盖层颜色，透明度等，实现了弹出窗口后背景变灰并屏蔽的功能，和sina的类似可以更改标题头和内容，还可以改遮盖层颜色，透明度等、详细配置参照演示文件
jQuery 全选、反选及漂亮的模态提示框功能
05-01
内容索引:脚本资源,jQuery,提示框,模态弹出窗口　jQuery 全选与反选以及模态弹出提示框功能，总体写的不错，很实用的功能，特别是那个提示框很漂亮，全部选择、反向选择、全部删除等这些功能在WEB设计中经常用到的...
IOS动感漂亮IOS7风格下拉提示框
08-11
IOS动感漂亮IOS7风格下拉提示框，内置三个效果 非常实用
html页面设置一个漂亮的表单，填写完毕后提交可显示所填写的信息。
09-17
### 回答1： 可以使用HTML和CSS来创建漂亮的表单并使用JavaScript处理表单提交的数据。 HTML代码示例： ```html <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="message">Message:</label><br> <textarea id="message" name="message"></textarea><br><br> <input type="submit" value="Submit"> </form> <div id="output"></div> ``` CSS代码示例： ```css form { max-width: 500px; margin: auto; text-align: center; padding: 20px; border: 1px solid #ccc; border-radius: 15px; } label { display: inline-block; width: 100px; text-align: left; font-weight: bold; margin-bottom: 10px; } input[type="text"], input[type="email"], textarea { padding: 10px; width: 100%; margin-bottom: 20px; border: none; border-radius: 5px; box-shadow: 0 0 5px #ccc; } input[type="submit"] { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #3e8e41; } ``` JavaScript代码示例： ```javascript const form = document.getElementById("myForm"); const output = document.getElementById("output"); form.addEventListener("submit", function(event) { event.preventDefault(); // prevent the default form submission const name = form.elements["name"].value; const email = form.elements["email"].value; const message = form.elements["message"].value; // display the submitted data output.innerHTML = ` <p>Name: ${name}</p> <p>Email: ${email}</p> <p>Message: ${message}</p> `; // clear the form fields form.reset(); }); ``` 这个示例代码会创建一个带有输入字段和提交按钮的表单。当用户填写表单并提交时，JavaScript代码会捕获表单提交事件并阻止默认的表单提交行为。然后，它会收集表单字段的值，并将其显示在页面上。最后，它会清空表单字段，以便用户可以提交其他消息。 ### 回答2： 要创建一个漂亮的HTML表单并在提交后显示填写的信息，可以按照以下步骤进行操作： 1. 首先，在HTML文件中创建一个表单元素，可以使用`<form>`标签。例如： ```html <form> <!-- 表单内容将在此处创建 --> </form> ``` 2. 在表单中添加需要填写的字段，可以使用不同的输入类型如文本、电子邮件、日期等。需要使用`<input>`标签。例如： ```html <input type="text" id="name" name="name" placeholder="请输入姓名" required> ``` 3. 在表单中添加提交按钮，可以使用`<button>`标签。例如： ```html <button type="submit">提交</button> ``` 4. 在表单下方创建一个用于显示已填写信息的区域。可以使用`<div>`或其他适当的元素来包装。例如： ```html <div id="results"></div> ``` 5. 在HTML文件末尾或在需要的位置，添加一个JavaScript脚本来处理表单提交事件并显示填写的信息。例如： ```html <script> document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交操作 // 获取表单字段的值 var name = document.getElementById('name').value; // 此处可以根据需要获取其他字段的值 // 在结果区域显示填写的信息 var results = document.getElementById('results'); results.textContent = '您填写的姓名是：' + name; // 此处可以根据需要显示其他字段的值 // 清空表单字段 document.querySelector('form').reset(); }); </script> ``` 通过以上步骤，您可以创建一个漂亮的HTML表单，并在提交后显示所填写的信息。注意，这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。 ### 回答3： 要创建一个漂亮的表单并在提交后显示填写的信息，可以按照以下步骤进行操作： 步骤1：创建HTML页面结构 首先，我们需要创建一个基本的HTML页面结构。使用HTML标签创建一个表单，并结构如下： ```html <!DOCTYPE html> <html> <head> <title>漂亮的表单</title> <style> /* CSS样式 */ </style> </head> <body> <form> <!-- 表单内容 --> </form> </body> </html> ``` 步骤2：添加表单字段 在form标签内，添加表单字段。可以使用input、textarea等标签创建不同类型的输入字段。以创建一个文本输入框和一个提交按钮为例： ```html <input type="text" name="name" placeholder="请输入姓名"><br> <textarea name="message" placeholder="请输入留言"></textarea><br> <input type="submit" value="提交"> ``` 步骤3：样式美化 使用CSS样式来美化表单。通过选择器，设置不同的样式，如颜色、边框、背景等。例如： ```html <style> input, textarea { width: 300px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } input[type="submit"] { background-color: #4CAF50; color: white; cursor: pointer; } </style> ``` 步骤4：处理表单提交 为了显示填写的信息，需要使用服务器端脚本或JavaScript来处理表单的提交动作。这里我们使用JavaScript来实现。首先，在HTML页面的底部添加如下代码： ```html <script> // 获取表单元素 var form = document.querySelector("form"); // 监听表单提交事件 form.addEventListener("submit", function(event) { // 阻止表单默认提交动作 event.preventDefault(); // 获取表单中的值 var name = document.querySelector('input[name="name"]').value; var message = document.querySelector('textarea[name="message"]').value; // 将值显示在页面上 alert("姓名：" + name + "\n留言：" + message); }); </script> ``` 现在，当用户填写完表单后，点击提交按钮，页面将弹出一个提示框显示填写的姓名和留言信息。你可以根据自己的需求修改代码和样式，来创建一个更加漂亮和实用的表单。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 安装Office 2016 出现 Office 16 Click-to-Run Extensibility Component 149080
  • sql server 查看表的死锁和Kill 死锁进程 94174
  • Mysql 查看使用命令行查看数据库和表,字段等信息 80374
  • Oracle 的加减法函数 54780
  • IntelliJ: Maven projects need to be imported: Import Changes Enable Auto-Import 42779

分类专栏

  • C#(1) 158篇
  • Sql Server(1) 105篇
  • Sql Server(2) 33篇
  • MySql 4篇
  • Oracle 51篇
  • 网络技术 115篇
  • 转载 19篇
  • 生活 11篇
  • Java 6篇

最新评论

  • Sql Server Function函数 is not a recognized built-in function name

    牧876: Cannot find either column "dbo" or the user-defined function or aggregate "dbo.second", or the name is ambiguous.

  • Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法

    @地..: 我也没有，请问您最后解决了吗

  • IntelliJ: Maven projects need to be imported: Import Changes Enable Auto-Import

    南山 有谷堆: 我也找不到了。。。

  • Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法

    长岛冰茶2333: 我的注册表没有inetstp怎末办

  • Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法

    长岛冰茶2333: 我的注册表没有inetstp怎末办

大家在看

  • 【Python】成功解决SyntaxError: invalid syntax
  • Java那些事儿 —— 写一篇妈妈也能看懂的Java学习笔记
  • 摸鱼大数据——Hive调优1-3 1607
  • JAVA面向对象三大特征之继承 755
  • 超声波声光一体自取电驱鸟器DL-S6223

最新文章

  • .NET XML解析
  • IntelliJ: Maven projects need to be imported: Import Changes Enable Auto-Import
  • Tomcat的管理界面 ,设置管理员账号密码
2020年1篇
2018年6篇
2017年12篇
2016年45篇
2015年41篇
2014年53篇
2013年111篇
2012年106篇
2011年47篇
2010年63篇
2009年18篇

目录

目录

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值

哆哆女性网营销演出推广甜菜根种植神奇宝可梦日月破解版下载成都市学校网站建设999免费看片余姚网站建设推广明月照我心电视剧返利网站建设cbd青年公寓awardspace算命网事业宝宝起名测出听起来大气的名字大全新生儿取名起名大全大全男孩如何推算自己是什么命商业起名钢管租赁公司起名伤感的秋天美文美句卖玉店铺起名邓姓起名字男孩cctv风云足球频道周易密钥pdf七寻的情侣网名董易奇一周生肖运势梁羽生武侠小说全集梦见自己被吓醒解梦商会网站制作御姐与皮鞭周公解梦自己家被抢劫怎样给美容院起名淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化