加盟弹窗填写信息

liuqimichale
1 parent 8f978af8
Showing 5 changed files with 148 additions and 3 deletions
css/joinous.css
images/breadcrumb-bg.jpg
joinous.html
js/joinous.js
services.html
@@ -64,3 +64,45 @@
     line-height: 20px;
     color: #666;
 }
+.form-group-height {
+    height: 34px;
+    width: 400px;
+    margin: 15px auto 0;
+    color: #626c72;
+}
+.width30 {
+    width: 100px;
+    float: left;
+    text-align: right;
+    margin-right: 10px;
+    line-height: 34px;
+}
+.width65 {
+    float: left;
+    width: 220px;
+    height: 34px;
+    line-height: 34px;
+    font-size: 14px;
+    /* overflow: hidden; */
+    /* text-overflow: ellipsis; */
+    /* white-space: nowrap; */
+}
+.btn {
+    text-align: center;
+    width: 60px;
+    background-color: #2abb9a;
+    font-size: 14px;
+    color: #fff !important;
+}
+.modal-footer {
+    border-top: none !important;
+    text-align: center;
+}
+.write_rule {
+    height: 34px;
+    color: #f00;
+    font-size: 14px;
+    line-height: 34px;
+    margin-top: 10px;
+    text-align: center;
+}
@@ -80,7 +80,7 @@
         <div class="row">
             <div class="col-md-12 col-xs-12">
                 <div class="text-center joinous-bg-title">云平台合作加盟</div>
-                <div class="joinous-title-btn">我要加盟</div>
+                <div class="joinous-title-btn" id="join_btn">我要加盟</div>
             </div>
         </div>
     </div>
@@ -185,6 +185,60 @@
 </footer>
 <!--/ End Footer Area -->
+<div class="modal fade in" id="openmodel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h4 class="modal-title" id="">加盟招募</h4>
+            </div>
+            <div class="modal-body">
+                <div class="form-group form-group-height">
+                    <div class="width30 ">公司名称:</div>
+                    <div class="width65 " id="porNames">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="25" id="porNames_inp">
+                    </div>
+                </div>
+                <div class="form-group form-group-height">
+                    <div class="width30 ">联系人姓名:</div>
+                    <div class="width65 " id="personNames">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="25" id="personNames_inp">
+                    </div>
+                </div>
+                <div class="form-group form-group-height">
+                    <div class="width30 ">联系人职务:</div>
+                    <div class="width65 " id="personDuties">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="25" id="personDuties_inp">
+                    </div>
+                </div>
+                <div class="form-group form-group-height">
+                    <div class="width30 ">手机:</div>
+                    <div class="width65 " id="userTel">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" id="userTel_inp">
+                    </div>
+                </div>
+                <div class="form-group form-group-height">
+                    <div class="width30 ">邮箱:</div>
+                    <div class="width65 " id="userEmail">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="25" id="userEmail_inp">
+                    </div>
+                </div>
+                <div class="form-group form-group-height">
+                    <div class="width30 ">通讯地址:</div>
+                    <div class="width65 " id="userAddr">
+                        <input type="text" class="width65 borcol" style="padding-left:10px;" maxlength="25" id="userAddr_inp">
+                    </div>
+                </div>
+                <div id="write_rule" class="write_rule display-none"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn " id="write-submit">提交</button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/colors.js"></script>
@@ -206,6 +260,6 @@
 <script type="text/javascript" src="js/nav-footer.js?a=2"></script>
 <script type="text/javascript" src="js/main.js?a=2"></script>
-<script type="text/javascript" src="js/joinous.js?a=1"></script>
+<script type="text/javascript" src="js/joinous.js?a=2"></script>
 </body>
 </html>
+//加盟弹窗
+$('#join_btn').on('click', function () {
+  $('#porNames_inp').val('');
+  $('#personNames_inp').val('');
+  $('#personDuties_inp').val('');
+  $('#userTel_inp').val('');
+  $('#userEmail_inp').val('');
+  $('#userAddr_inp').val('');
+  $('#write_rule').addClass('display-none').text('');
+  $('#openmodel').modal('show');
+})
+//提交信息
+$('#write-submit').on('click', function () {
+  var porNames= $.trim($('#porNames_inp').val());
+  var personNames=$.trim($('#personNames_inp').val());
+  var personDuties=$.trim($('#personDuties_inp').val());
+  var userTel=$.trim($('#userTel_inp').val());
+  var userEmail=$.trim($('#userEmail_inp').val());
+  var userAddr=$.trim($('#userAddr_inp').val());
+  if(porNames == '' || porNames == undefined || porNames == null) {
+    $('#write_rule').removeClass('display-none').text('请输入公司名称');
+    return;
+  }else if(personNames == '' || personNames == undefined || personNames == null) {
+    $('#write_rule').removeClass('display-none').text('请输入联系人姓名');
+    return;
+  }else if(personDuties == '' || personDuties == undefined || personDuties == null) {
+    $('#write_rule').removeClass('display-none').text('请输入联系人职务');
+    return;
+  }else if(userTel == '' || userTel == undefined || userTel == null) {
+    $('#write_rule').removeClass('display-none').text('请输入手机号');
+    return;
+  }else if(!/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(userTel)||userTel.length!=11) {
+    $('#write_rule').removeClass('display-none').text('请输入正确手机号');
+    return;
+  }else if(userEmail == '' || userEmail == undefined || userEmail == null) {
+    $('#write_rule').removeClass('display-none').text('请输入邮箱');
+    return;
+  }else if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(userEmail)) {
+    $('#write_rule').removeClass('display-none').text('请输入正确邮箱');
+    return;
+  }else if(userAddr == '' || userAddr == undefined || userAddr == null){
+    $('#write_rule').removeClass('display-none').text('请输入通讯地址');
+    return;
+  }else{
+    $('#write_rule').addClass('display-none').text('');
+    //ajax
+    $('#openmodel').modal('hide');
+  }
+})
@@ -61,7 +61,7 @@
                     专业智慧停车综合服务平台
                 </div>
                 <div class="services-bannertext">
-                    服务一体化+运营智能化+使用便捷化
+                    服务一体化  +  运营智能化  +  使用便捷化
                 </div>
             </div>
         </div>