jQuery实现时尚漂亮的弹出式对话框实例


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现时尚漂亮的弹出式对话框。分享给大家供大家参考。具体如下:

这是一款十分简洁漂亮的HTML5弹出对话框效果,基于jQuery来实现,引入了jquery1.6.2库。

本效果描述:用鼠标点击一下右上角的小图标,会弹出一个层对话框,里面可以提交留言、评论之类的。

运行效果截图如下:

jQuery实现时尚漂亮的弹出式对话框实例

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery对话框-时尚漂亮</title>
<style>
*{margin: 0;padding: 0;}
body{font-family: Arial, Tahoma, sans-serif;}
h1{font-family: Helvetica, Arial, Verdana, sans-serif;color: #444;font-weight: bold;font-size: 1.7em;line-height: 1.2em;}
h3{font-family: Georgia, Helvetica, sans-serif;color: #898989;font-weight: normal;font-style: italic;font-size: 1.3em;line-height: 1.0em;margin-bottom: 10px;}
h4{font-size: 0.9em;text-transform: uppercase;}
br{display: block;clear: both;position: relative;}
.break{display: block;height: 20px;}
#wrap{display: block;padding-top: 30px;width: 800px;margin: 0 auto;}
#left{width: 160px;float: left;display: block;margin-right: 15px;}
#right{width: 350px;float: left;display: block;}
.usrava{padding: 5px;border: 1px solid #ddd;}
input[type="text"], input[type="password"], textarea, select{outline: none;}
#msgform{width: 330px;background: #faf7e3;border: 8px solid #f0ecd0;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;padding: 4px 14px;top: -1px;z-index: 9;}
.mainCompose{display: inline;}
.msgInput{border: 1px solid #d8d5bb;border-top-color: #b1ae99;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;width: 290px;font-size: 15px;color: #727167;padding: 4px 7px;font-family: Arial, Tahoma, sans-serif;}
.msgField{border: 1px solid #d8d5bb;border-top-color: #b1ae99;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;width: 290px;color: #a4a39c;color: #727167;font-size: 15px;padding: 5px 9px;font-family: Arial, Tahoma, sans-serif;height: 140px;margin-bottom: 20px;}
#composebtn img{cursor: pointer;}
#tofield{margin-bottom: 1px;}
.containmsg{margin-left: 50px;display: block;float: right;position: relative;}
.containmsg .mainCompose{position: absolute;left: -33px;top: 20px;}
.recipient{display: block;padding: 3px 7px;text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: bold;background: #eae7d1;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;color: #949286;}
.recipient: hover{color: #75746a;}
.userslist{display: inline;list-style: none;padding: 0;margin-bottom: 5px;position: relative;top: 10px;margin-left: 2px;}
.userslist li{float: left;}
#tofield: focus, #mymsg: focus{box-shadow: 0px 0px 7px #007eff;}
#msgform label{display: inline;color: #827f6a;font-size: 14px;font-weight: bold;font-family: "Trebuchet MS", Arial, sans-serif;margin-bottom: 4px;}
.calloutUp{height: 0;width: 0;border-bottom: 12px solid #f0ecd0;border-left: 12px dotted transparent;border-right: 12px dotted transparent;left: 0px;top: 0px;margin-left: 30px;z-index: 10;}
.calloutUp2{position: relative;left: -12px;top: 8px;border-bottom: 12px solid #faf7e3;border-left: 12px dotted transparent;border-right: 12px solid transparent;z-index: 11;}
p#errortxt{margin-top: -15px;font-size: 0.7em;font-style: italic;color: #555;margin-bottom: 10px;}
.sendbtn{display: inline-block;outline: none;margin-bottom: 12px;cursor: pointer;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12px;color: #827f6a;padding: 7px 12px;border: 1px solid #cac8bb;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;border-top-color: #dddac3;text-shadow: 0px 0px 1px rgba(97,97,93,.3);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);background: #f6f5ea;background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f3), to(#f5f4e6));background: -moz-linear-gradient(top, #f9f9f3, #f5f4e6);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f3', endColorstr='#f5f4e6');}
.sendbtn: hover{background: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fbfbf5));background: -moz-linear-gradient(top, #fff, #fbfbf5);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fbfbf5');color: #93928d;}
.clearfix: after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix{display: inline-block;}
html[xmlns] .clearfix{display: block;}
* html .clearfix{height: 1%;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(".mainCompose").hide();
 $('.loader').hide();
 $('#errortxt').hide();
 $('.compose').click(function() {
  $('.mainCompose').slideToggle();
 });
 $('.sendbtn').click(function(e) {
  e.preventDefault();
  $('.sendbtn').hide();
  $('.loader').show();
  if($('#mymsg').val() == "") {
   $('#errortxt').show();
   $('.sendbtn').show();
   $('.loader').hide();
  }
  else {
   $('sendbtn').hide();
   $('.loader').show();
   $('#errortxt').hide();
   var formQueryString = $('#sendprivatemsg').serialize();
   finalSend();   
  }
  function finalSend() {
   $('.mainCompose').delay(1000).slideToggle('slow', function() {
    $('#composeicon').addClass('sent').removeClass('compose').hide();
    $('#composebtn').append('<img src="//img.jbzj.com/file_images/article/201508/201587174202745.png" />');
   });
  }
 });
});
</script>
</head>
<body>
<div id="wrap">
<div class="profile clearfix">
 <section id="left">
  <img src="//img.jbzj.com/file_images/article/201508/201587174059293.png" alt="Jake's Avatar" class="usrava" />
 </section>
 <section id="right">
  <!-- begin modal msg box -->
  <div class="containmsg">
   <p id="composebtn"><img src="//img.jbzj.com/file_images/article/201508/201587174136207.gif" alt="compose" class="compose" id="composeicon" /></p>
   <div class="mainCompose">
    <div class="calloutUp">
     <div class="calloutUp2">
     </div>
    </div> 
    <div id="msgform">
    <form name="sendprivatemsg" id="sendprivatemsg" action="#" method="post">
     <label for="tofield" class="tofield">To</label>
     <ul class="userslist clearfix">
     <li><a href="#" target="_blank" class="recipient">Jake Rocheleau</a></li>
     </ul>
     <div class="break"></div>
     <label for="mymsg" id="msmglabel">Message</label>
     <textarea name="mymsg" id="mymsg" class="msgField"></textarea>
     <p id="errortxt">**Enter some text!</p>
     <div id="sendbtncontain"><a class="sendbtn">Send Message</a><img src="//img.jbzj.com/file_images/article/201508/201587174222306.gif" class="loader" /></div>
    </form>
    </div>
   </div>
  </div>
  <!-- @end modal -->
  <h1>Jake Rocheleau</h1>
  <h3>blogger and freelance web designer.</h3>
 </section>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue实现节点增删改功能
Sep 26 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
You might like
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
前台文员职责范本
2014/03/07 职场文书
公司门卫岗位职责
2014/03/15 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
企业负责人任命书
2014/06/05 职场文书
田径运动会通讯稿
2014/09/13 职场文书
放假通知格式
2015/04/14 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android