js實現彈出窗口+遮罩層+tab切換

時間  2019-12-09
標籤 實現 彈出 窗口 tab 切換 欄目 JavaScript 简体版
原文   原文鏈接

【功能1】點擊約談按鈕，彈出對話框和遮罩層（本身的叫法 專業叫法沒有查）javascript

 

【部分重點代碼】css

 【下面的方法】html

（1）獲取系統時間如何實現（2）點擊如何實現彈出窗口和遮罩層前端

 1 $(".date_now").click(function(){
 2 $.ajax({
 3 url:"/userCenter/getProject.jspx",
 4 data:{"userId":"${currt.id}"},
 5 success:function(result){
 6 var obj=eval('('+result+')');
 7 $("#pname").text(obj.pname);
 8 }
 9 })
10 //獲取系統時間
11 var date = new Date();
12 var seperator1 = "-";
13 var seperator2 = ":";
14 var month = date.getMonth() + 1;
15 var strDate = date.getDate();
16 if (month >= 1 && month <= 9) {
17 month = "0" + month;
18 }
19 if (strDate >= 0 && strDate <= 9) {
20 strDate = "0" + strDate;
21 }
22 var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
23 + " " + date.getHours() + seperator2 + date.getMinutes()
24 + seperator2 + date.getSeconds();
25 $("#date").text(currentdate);
26 $("#marklayer,.modal").css("display","block");
27 });
28 $("a.close").click(function(){
29 $("#marklayer,.modal").css("display","none");
30 })

 

 【tab切換】java

頁面效果node

【主要代碼】ajax

 1     <div class="hc-eptd-main">
 2         <div class="hc-eptd-list clearfix">
 3             <ul>
 4                 <li class="on">投資人簡介</li>
 5                 <li>投資機構簡介</li>
 6                 <li>已投項目</li>
 7             </ul>
 8         </div>
 9          <div class="eptd_box" style="display:block;">
10              <div class="eptd_profile">
11                  <h2><i class="eptd_cj"></i>主要成就</h2>
12                  <p>${user.bio}</p>
13                 <h2><i class="eptd_fs"></i>聯繫方式</h2>
14                 <p>郵箱：${user.email!''}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手機：${user.mobile!''}</p>
15              </div>
16          </div>
17          
18          <div class="eptd_box" >
19              <div class="eptd_profile">
20                  <h2><i class="eptd_mc"></i>機構名稱：</h2>
21                  <p>${user.cmsUserCompany.companyname}</p>
22                 <h2><i class="eptd_jj"></i>公司簡介</h2>
23                 <p>${user.cmsUserCompany.companyintro}</p>
24              </div>
25          </div>
26 
27          <div class="eptd_box" >
28              <div class="eptd_project clearfix">
29                  <ul>
30                  [#list user.cmsProjects as project]
31                     <li>
32                         <div class="eptd-project-con">
33                             <h2>${project.pname}</h2>
34                             <div class="eptd_project_box">
35                                 <p><i class="eptd-icon01"></i>${project.org.name}</p>
36                                 <p><i class="eptd-icon02"></i>團隊人數:${project.cmsProjectMembers?size}人</p>
37                                 <p><i class="eptd-icon03"></i>已進行${project.rztimes}輪融資</p>
38                             </div>
39                         </div>
40                         <div class="eptd-project-img">
41                             <a href="/projectDetail_${project.id}.jspx"><img src="${project.photourl}"/></a>
42                             <p>${substring(project.pdescribe,200,'...')}</p>
43                         </div>
44                     </li>
45                 [/#list]    
46 
47              </div>
48          </div>
49          
50     </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")
    })

 

 

 

 

【前端所有代碼】chrome

[#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}&nbsp;&nbsp;
                        [/#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!''}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手機：${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>創&nbsp;&nbsp;始&nbsp;&nbsp;人：</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>日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</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]
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程