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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Js面试算法详解
Apr 08 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
微信小程序实现吸顶特效
Jan 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
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP的基本常识小结
2013/07/05 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JS常用知识点整理
2017/01/21 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
JS实现简单日历特效
2020/01/03 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python爬虫爬取网页表格数据
2018/03/07 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python读取图片任意范围区域
2019/01/23 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
经典C++面试题一
2016/11/06 面试题
过滤器的用法
2013/10/08 面试题
市场总经理岗位职责
2014/04/11 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
党员示范岗材料
2014/12/19 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android