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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue实现树形菜单效果
Mar 19 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
PHP内核探索:变量概述
2014/01/30 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
浅析php工厂模式
2014/11/25 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
大课间活动制度
2014/01/18 职场文书
移交协议书
2014/08/19 职场文书
全陪导游词开场白
2015/05/29 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL