js实现弹出窗口+遮罩层+tab切换
【功能1】点击约谈按钮，弹出对话框和遮罩层（自己的叫法 专业叫法没有查）
【部分重点代码】
【下面的方法】
（1）获取系统时间如何实现（2）点击如何实现弹出窗口和遮罩层
$(".date_now").click(function(){
$.ajax({
url:"/userCenter/getProject.jspx",
data:{"userId":"${currt.id}"},
success:function(result){
var obj=eval('('+result+')');
$("#pname").text(obj.pname);
}
})
//获取系统时间
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
$("#date").text(currentdate);
$("#marklayer,.modal").css("display","block");
});
$("a.close").click(function(){
$("#marklayer,.modal").css("display","none");
})
【tab切换】
页面效果
【主要代码】
<div class="hc-eptd-main">
<div class="hc-eptd-list clearfix">
<ul>
<li class="on">投资人简介</li>
<li>投资机构简介</li>
<li>已投项目</li>
</ul>
</div>
<div class="eptd_box" style="display:block;">
<div class="eptd_profile">
<h2><i class="eptd_cj"></i>主要成就</h2>
<p>${user.bio}</p>
<h2><i class="eptd_fs"></i>联系方式</h2>
<p>邮箱：${user.email!''} 手机：${user.mobile!''}</p>
</div>
</div> <div class="eptd_box" >
<div class="eptd_profile">
<h2><i class="eptd_mc"></i>机构名称：</h2>
<p>${user.cmsUserCompany.companyname}</p>
<h2><i class="eptd_jj"></i>公司简介</h2>
<p>${user.cmsUserCompany.companyintro}</p>
</div>
</div> <div class="eptd_box" >
<div class="eptd_project clearfix">
<ul>
[#list user.cmsProjects as project]
<li>
<div class="eptd-project-con">
<h2>${project.pname}</h2>
<div class="eptd_project_box">
<p><i class="eptd-icon01"></i>${project.org.name}</p>
<p><i class="eptd-icon02"></i>团队人数:${project.cmsProjectMembers?size}人</p>
<p><i class="eptd-icon03"></i>已进行${project.rztimes}轮融资</p>
</div>
</div>
<div class="eptd-project-img">
<a href="/projectDetail_${project.id}.jspx"><img src="${project.photourl}"/></a>
<p>${substring(project.pdescribe,200,'...')}</p>
</div>
</li>
[/#list] </div>
</div> </div>
【js代码】
$(".hc-eptd-list ul li").click(function(){
var index=$(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(".hc-eptd-main .eptd_box").eq(index).css("display","block").siblings(".eptd_box").css("display","none")
})
【前端全部代码】
[#escape x as (x)!?html]
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>[#include 'inc_title.html'/]</title>
<meta name="keywords" content="${node.keywords}"/>
<meta name="description" content="${node.description}"/>
<link href="_files/css/common.css" rel="stylesheet"/>
<link href="_files/css/content.css" rel="stylesheet"/>
<link href="_files/css/hc-aim.css" rel="stylesheet">
[#include 'inc_js.html'/] <script>
$(function(){
$(".hd-nav ul li").removeClass("curr");
$(".banner-other").addClass("investor-banner"); $(".hc-eptd-list ul li").click(function(){
var index=$(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(".hc-eptd-main .eptd_box").eq(index).css("display","block").siblings(".eptd_box").css("display","none")
})
$(".date_now").click(function(){
$.ajax({
url:"/userCenter/getProject.jspx",
data:{"userId":"${currt.id}"},
success:function(result){
var obj=eval('('+result+')');
$("#pname").text(obj.pname);
}
})
//获取系统时间
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
$("#date").text(currentdate);
$("#marklayer,.modal").css("display","block");
});
$("a.close").click(function(){
$("#marklayer,.modal").css("display","none");
}) }) function interview(){
var title=$("#title").val(),
msg=$("#msg").val(),
errorMessage=$(".errorMessage"); if(title==''){
errorMessage.html("约谈标题不能为空");
return;
} if(title.length>100){
errorMessage.html("约谈标题不能超过100字");
return;
} if(msg==''){
errorMessage.html("约谈内容不能为空");
return;
} if(msg.length>250){
errorMessage.html("约谈内容不能超过250字");
return;
} $("#marklayer,.modal").css("display","none");
$("#interForm").submit();
}
</script>
</head>
<body>
[#include 'inc_header.html'/]
[#include 'inc_pubbannel.html'/] <div class="hc-eptd-wrap comm">
<div class="bread-nav">
<ol class="fll">
<li><a href="/index_${org.id}.jspx">主页</a></li>
<li class="bread-sign"><span></span></li>
<li><a href="/investorList.jspx">投资人列表</a></li>
<li class="bread-sign"><span></span></li>
<li class="last">详情</li>
</ol>
</div>
<div class="hc-eptd-head">
<div class="eptd_info clearfix">
<div class="eptd_info_img">
<img src="${user.photourl}" onerror="javascript:this.src='images/peopleDefault.png';"/>
</div>
<div class="eptd_info_txt">
<h6>${user.realName}</h6>
<span class="eptd_iv">已投项目：<font>${user.cmsProjects?size}个</font></span>
<span class="eptd_iv">已投金额：<font>${price}万</font></span>
<span class="address">
<i class="location"></i>${user.comeFrom} <br />
<i class="industry"></i>
[#list user.cmsDomains as domain]
[#if domain.type==1]
${domain.name}
[/#if]
[/#list]
</span>
[#if currt??]
[#if currt.group.id==3]
<a href="javascript:" class="date_now">约谈</a>
[/#if]
[/#if]
</div>
</div> </div>
<div class="hc-eptd-main">
<div class="hc-eptd-list clearfix">
<ul>
<li class="on">投资人简介</li>
<li>投资机构简介</li>
<li>已投项目</li>
</ul>
</div>
<div class="eptd_box" style="display:block;">
<div class="eptd_profile">
<h2><i class="eptd_cj"></i>主要成就</h2>
<p>${user.bio}</p>
<h2><i class="eptd_fs"></i>联系方式</h2>
<p>邮箱：${user.email!''} 手机：${user.mobile!''}</p>
</div>
</div> <div class="eptd_box" >
<div class="eptd_profile">
<h2><i class="eptd_mc"></i>机构名称：</h2>
<p>${user.cmsUserCompany.companyname}</p>
<h2><i class="eptd_jj"></i>公司简介</h2>
<p>${user.cmsUserCompany.companyintro}</p>
</div>
</div> <div class="eptd_box" >
<div class="eptd_project clearfix">
<ul>
[#list user.cmsProjects as project]
<li>
<div class="eptd-project-con">
<h2>${project.pname}</h2>
<div class="eptd_project_box">
<p><i class="eptd-icon01"></i>${project.org.name}</p>
<p><i class="eptd-icon02"></i>团队人数:${project.cmsProjectMembers?size}人</p>
<p><i class="eptd-icon03"></i>已进行${project.rztimes}轮融资</p>
</div>
</div>
<div class="eptd-project-img">
<a href="/projectDetail_${project.id}.jspx"><img src="${project.photourl}"/></a>
<p>${substring(project.pdescribe,200,'...')}</p>
</div>
</li>
[/#list] </div>
</div> </div>
</div> <div id="marklayer"></div>
<div class="pro-appoint modal">
<div class="modal-box">
<div class="modal-header">
<h3>约见</h3>
<a class="close"></a>
</div>
<div class="modal-body">
<form id="interForm" action="/userCenter/inverstor.jspx" method="post">
<input type="hidden" name="userId" value="${user.id}"/>
<table> <!-- <tr><td><span></span></td><td><p>${currt.cmsUserCompany.phone}</p></td></tr>-->
<tr><td class="hc-modal-tit"><span>创 始 人：</span></td><td><p>${(currt.realName)!''}</p></td></tr>
<tr><td class="hc-modal-tit"><span>联系方式：</span></td><td><p>${(currt.cmsUserCompany.phone)!''}</p></td></tr>
<tr><td class="hc-modal-tit"><span>日 期：</span></td><td><p><div id="date"></div></p></td></tr>
<tr><td class="hc-modal-tit"><span>项目名称：</span></td><td ><div id="pname"></div></td></tr>
<tr><td class="hc-modal-tit">邀约简述：</td><td colspan="5"><input type="text" id="title" name="title"></td></tr>
<tr><td colspan="2"><textarea name="msg" id="msg" placeholder="邀约留言"></textarea></td></tr>
</table>
<div class="errorMessage" style="top:90%"></div>
</form>
</div> <div class="modal-footer">
<button onclick="interview();">发送信息</button>
</div>
</div>
</div> [#include 'inc_footer.html'/]
</body>
</html>
[/#escape]
js实现弹出窗口+遮罩层+tab切换的更多相关文章
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- js实现弹出窗口、页面变成灰色并不可操作的例子
function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...
随机推荐
- JVM(4) 虚拟机性能监控与故障处理工具
1. Sun JDK 监控和故障处理工具 1)jps:JVM process Status Tool,显示指定系统内所有的HotSpot虚拟机进程.可以列出正在运行的虚拟机进程,并显示虚拟机执行主类( ...
- Leaflet API 翻译（二）
摘自:http://www.ithao123.cn/content-824673.html L.Point 显示以像素为单位的点的x,y坐标. 所以接受点对象的leaflet方法和选项都也接受他们简单 ...
- SQL SERVER 索引中聚集索引分析和Transact-SQL语句优化
一. 聚集索引B树分析1.聚集索引按B树结构进行组织的,索引B树种的每一页称为一个索引节点.B树的顶端节点称为根节点. 索引中的低层节点称为叶节点.根节点与叶节点之间的任何索引级别统称为中间级.在聚 ...
- [mongodb] WiredTiger Storage Engine
今天看了mongodb的官方文档中的WiredTiger Storage Engine ,说说我对WiredTiger Storage Engine 的理解! 在mongodb3.2版本以后,wire ...
- Spring中的@Transactional以及事务的详细介绍
首先来说下事务,说到事务就不得不说它的四个特性(acid): 一.特性 1.原子性(atomicity):一个事务当作为一个不可分割的最小工作单元,一组操作要么全部成功,要么全部失败. 2.一致性(c ...
- eclipse部署的web项目没有添加到Tomcat的webapps目录下解决方法
eclipse没有像myeclipse那样,添加web项目时会自动部署到Tomcat的webapps目录下. 而是部署到了eclipse的.metadata\.plugins\org.eclipse. ...
- Floyd算法 - 最短路径
2017-07-27 22:21:04 writer:pprp 该算法的本质是动态规划,形式简单,复杂度高为O(n^3): d[i][j] = max(d[i][k]+d[k][j],d[i][j]) ...
- Pandas IO工具
Pandas I/O API是一套像pd.read_csv()一样返回Pandas对象的顶级读取器函数. 读取文本文件(或平面文件)的两个主要功能是read_csv()和read_table().它们 ...
- 源码安装LNMP与搭建Zabbix
系统环境:CentOS release 6.5 (Final) 搭建Zabbix 3.0对PHP环境要求>= 5.4 一.下载NMP的软件包: N:wget http://nginx.org/d ...
- js 验证 －身份证等
js验证身份证: function isIdCard(idCard) { var num = idCard.toLowerCase().match(/\w/g); if (idCard.match(/ ...