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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
js返回顶部实例分享
Dec 21 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
深入解析ES6中的promise
Nov 08 Javascript
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
织梦模板标记简介
2007/03/11 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
解析php中const与define的应用区别
2013/06/18 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
javascript控制台详解
2015/06/25 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Django实现单用户登录的方法示例
2019/03/28 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
高二英语教学反思
2014/01/19 职场文书
诚信考试倡议书
2014/04/15 职场文书
自我推荐信范文
2014/05/09 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2015年招聘工作总结
2014/12/12 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
培养联系人考察意见
2015/06/01 职场文书
工程移交协议书
2016/03/24 职场文书