Use js to click the add function to pop up the sub-page

1: Join in the EasternJoin page of GTOW

HTML：

@*东方页*@
@{ ViewBag.Title = "Green Oriental Hotel franchise official website_ Green Oriental Hotel franchise fee how much _ Green Oriental Hotel franchise phone number"; ViewBag.Keywords = "Green Oriental Hotel franchise official website_ Green Oriental Hotel franchise fee How much_Green Oriental Hotel franchise phone number"; ViewBag.Description = "Green Oriental Hotel official website franchise hotline 4006-998-998 transfer 6, learn more about the franchise fee of Green Oriental Hotel, main franchise service items, charging standards, franchise process, Investment calculation."; } <style> .pageContent { background-color: #fafafa; }

.hotelJoin {
width: 100%;
min-height: 100vh;
background-color: #fafafa;
padding: 20px 0 60px;
}

.hotelJoin .content {
width: 1200px;
height: 1852px;
margin: 0 auto;
background: url(../../../Content/Join/adment/joinImg/gldf.png) no-repeat;
background-size: 100% 100%;
position: relative;
}

.hotelJoin .title {
position: absolute;
font-size: 20px;
color: #333;
font-weight: bold;
}

.hotelJoin .title1 {
top: 516px;
left: 40px;
}

.hotelJoin .title2 {
top: 892px;
left: 20px;
}

.hotelJoin .title3 {
top: 892px;
left: 600px;
}

.hotelJoin .title4 {
top: 1401px;
left: 40px;
}

.hotelJoin .title5 {
width: 198px;
height: 50px;
color: white;
left: 783px;
bottom: 5px;
text-align: center;
line-height: 50px;
border-radius: 4px;
background-color: #FC822C;
cursor: pointer;
}
}
</style>

<div class="hotelJoin">
<div class="content">
<div class="title title1"> Conditions for joining Green Oriental Hotel</div>
<div class="title title2"> Fees for joining Green Oriental Hotel</div> div>
<div class="title title3">Investment calculation model</div>
<div class="title title4">Process of joining Green Oriental Hotel</div>
<div class="title title5">Join now</div >
</div>
</div>

2: The style CSS of the subpage

.submitForm .forms {
width: 360px;
height: 460px;
padding: 40px 0px 20px 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border-radius: 6px;
}

.submitForm .forms .newClose {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}

.submitForm .forms .ub {
display: flex;
margin-bottom: 20px;
}

.submitForm .forms .ub .cont {
width: 50%;
}

.submitForm .forms .ub .cont1 {
width: 100%;
}

.submitForm .forms .ub .title {
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 20px;
}

.submitForm .forms .code .title {
padding-top: 15px;
}

.submitForm .forms .ub input {
width: 140px;
height: 36px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #E5E5E5;
margin-top: 8px;
}

.submitForm .forms .ub textarea {
width: 300px;
height: 74px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #E5E5E5;
resize: none;
padding: 8px 12px;
margin-top: 8px;
outline: none;
box-shadow: none;
}

.submitForm .forms .code .imgcode {
padding-top: 9px;
}

.submitForm .forms #submitBtn {
width: 180px;
height: 48px;
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
line-height: 48px;
text-align: center;
background: #FF6427;
border-radius: 4px;
margin: auto;
}
</style>

3: Subpage HTML

<div class="submitForm">
<div class="forms">
<img class="newClose" src="../../../Content/Join/adment/img/newClose.png">
<div class="ub">
<div class="cont">
<div class="title">姓名：</div>
<div class="input">
<input id="FranchiseeName" autocomplete="off" />
</div>
</div>
<div class="cont">
<div class="title">联系方式：</div>
<div class="input">
<input id="Contact" autocomplete="off" />
</div>
</div>
</div>
<div class="ub">
<div class="cont">
<div class="title">拟开店城市：</div>
<div class="input">
<input id="HotelAdderssCity" autocomplete="off" />
</div>
</div>
<div class="cont">
<div class="title">建筑面积(m2)：</div>
<div class="input">
<input id="ConstructionArea" autocomplete="off" />
</div>
</div>
</div>
<div class="ub">
<div class="cont cont1">
<div class="title">Other:</div>
<div class="input">
<textarea id="LeaveMessage" maxlength="800" placeholder="Please enter your return If you want to know the information, we will contact you as soon as possible." autocomplete="off"></textarea>
</div>
</div>
</div>
<div class="ub code">
<div class="title ">Verification code:</div>
<div class="input">
<input id="qyzm" autocomplete="off" />
</div>
<div class="imgcode">
<img id="imgCode1" style="height: 39px;width:75px;margin-left:11px; "title="@Html.Lang(" Account_0075")" οnclick="flush('imgCode1');" src ="../Account/GetValidateCode">
</div>
</div>
<div id="submitBtn">Confirm submission</div>
</div>
</div>
4: Js opens and closes sub-pages : Pay attention to how to open the subpage, and use the click of style title5 to realize the display of the style of .submitForm,

Close click on the style of .submitForm .forms .newClose to realize the hiding of .submitForm--Hide

$("#submitBtn").click(function () {
var franName = $("#FranchiseeName").val();
var tel = $("#Contact").val();
var qyzm = $.trim($("#qyzm").val());
var LeaveMessage = $.trim($("#LeaveMessage").val());
var HotelAdderssCity = $.trim($("#HotelAdderssCity").val());
var ConstructionArea = $.trim($("#ConstructionArea").val());
if (franName == "" || franName == null) {
$("#FranchiseeName").focus();
alert("姓名不能为空");
return;

}
if (franName.indexOf("<") >= 0 || franName.indexOf(">") >= 0 || franName.indexOf("script>") >= 0) { alert('Name contains special String'); return; }

if (tel == null && tel == "") {

$("#Contact").focus();
alert("Contact information cannot be empty");
return;
}
if (tel.indexOf("<") >= 0 || tel.indexOf(">")> = 0 || tel.indexOf("script>") >= 0) { alert('The contact information contains a special string'); return; } if (qyzm == null && qyzm == "") {

$("#qyzm").focus();
alert("The verification code cannot be empty");
return;
}

if (LeaveMessage.indexOf("<") >= 0 || LeaveMessage.indexOf(">") >= 0 || LeaveMessage.indexOf("script>") >= 0) { alert('Contact information contains special String'); return; } if (HotelAdderssCity.indexOf("<") >= 0 || HotelAdderssCity.indexOf(">") >= 0 || HotelAdderssCity.indexOf("script>") >= 0) { alert('The contact information contains a special string'); return; } if (ConstructionArea.indexOf("<") >= 0 || ConstructionArea.indexOf(">") >= 0 || ConstructionArea.indexOf("script >") >= 0) { alert('The contact information contains a special string'); return; } $.ajax({

type: "POST",
url: '@Url.Action("ADDMesg", "Join")',
data: {
FranchiseeName: $("#FranchiseeName").val(),
Contact: $("#Contact").val(),
HotelAdderssCity: $("#HotelAdderssCity").val(),
ConstructionArea: $("#ConstructionArea").val(),
LeaveMessage: $("#LeaveMessage").val(),
code: qyzm
},
success: function (data) {
if (data.Successed) {
alert(data.msg);
window.location.reload();

} else {
$.fn.showAlert(data.msg);
flush('imgCode1');
return false;
}
},
dataType: "JSON",
error: function () {
$.fn.showAlert(ServerExceptional_Const);
flush('imgCode1');
}

})
});
});
</script>

Use js to click the add function to pop up the sub-page

Guess you like