用js点击添加功能弹出子页面

1：在GTOW的加盟 EasternJoin页面

HTML：

@*东方页面*@
@{
ViewBag.Title = "格林东方酒店加盟官网_ 格林东方酒店加盟费用多少钱_格林东方酒店加盟电话";
ViewBag.Keywords = "格林东方酒店加盟官网_ 格林东方酒店加盟费用多少钱_格林东方酒店加盟电话";
ViewBag.Description = "格林东方酒店官网加盟热线 4006-998-998转6，详细了解格林东方酒店加盟费用多少钱，主要加盟服务项目，收费标准，加盟流程，投资测算。";
}
<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">加盟格林东方酒店条件</div>
<div class="title title2">加盟格林东方酒店费用</div>
<div class="title title3">投资测算模型</div>
<div class="title title4">加盟格林东方酒店流程</div>
<div class="title title5">立即加盟</div>
</div>
</div>

2：子页面的样式CSS

.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：子页面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">其他：</div>
<div class="input">
<textarea id="LeaveMessage" maxlength="800" placeholder="请输入您还想了解的信息，我们将尽快与您联系。" autocomplete="off"></textarea>
</div>
</div>
</div>
<div class="ub code">
<div class="title">验证码：</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">确认提交</div>
</div>
</div>
4：Js进行子页面打开跟关闭功能：注意如何打开子页面，用样式 title5 的点击实现 .submitForm 这个样式的显示，

关闭点击.submitForm .forms .newClose 这个样式，实现 .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('姓名中包含特殊字符串');
return;
}

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

$("#Contact").focus();
alert("联系方式不能为空");
return;
}
if (tel.indexOf("<") >= 0 || tel.indexOf(">") >= 0 || tel.indexOf("script>") >= 0) {
alert('联系方式中包含特殊字符串');
return;
}
if (qyzm == null && qyzm == "") {

$("#qyzm").focus();
alert("验证码不能为空");
return;
}

if (LeaveMessage.indexOf("<") >= 0 || LeaveMessage.indexOf(">") >= 0 || LeaveMessage.indexOf("script>") >= 0) {
alert('联系方式中包含特殊字符串');
return;
}
if (HotelAdderssCity.indexOf("<") >= 0 || HotelAdderssCity.indexOf(">") >= 0 || HotelAdderssCity.indexOf("script>") >= 0) {
alert('联系方式中包含特殊字符串');
return;
}
if (ConstructionArea.indexOf("<") >= 0 || ConstructionArea.indexOf(">") >= 0 || ConstructionArea.indexOf("script>") >= 0) {
alert('联系方式中包含特殊字符串');
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>

用js点击添加功能 弹 出子页面

猜你喜欢

用js点击添加功能弹出子页面