小白新手开发网站-记录-2.表单提交
2020-03-25 本文已影响0人
荼蘼toome
前言:我也不清楚最简单的写法 我得意识中只有这种写法
使用的技巧:..form表单 id 类选择器 input输入框 button点击事件
首先
<div class="b-o f-b-o">
<div class="f-h">
<h2 style="line-height: 60px;">申请</h2>
</div>
<form id="form_7" onsubmit="return false" action="##" method="post">
<div style="height: 30px;"></div>
<div class="f-h-s">
<input type="text" placeholder="姓名" class="country2 form_7" name="xingming" id="xingming"/>
</div>
<div class="f-h-s">
<input type="text" placeholder="联系电话" class="country2 form_7" name="mobile" id="mobile"/>
</div>
<div class="f-h-s">
<input type="text" placeholder="邮箱" class="country2 form_7" name="email" id="email"/>
</div>
<button class="receiveBtn showTestFrameTwoAlert" onclick="message()">点击领取</button>
</form>
</div>
调用接口
<script>
function message(obj) {
var formdata = new FormData();
formdata.append("user_nickname", $('#xingming').val()); //获取文件法二
formdata.append("mobile", $('#mobile').val()); //获取文件法二
formdata.append("user_email", $('#email').val()); //获取文件法二
$.ajax({
type: 'post',
url: baseUrl + "api/portal/user/register", //接口
data: formdata,
dataType: 'json',
cache: false,
processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
contentType: false, // 不设置Content-type请求头
success: function(response) {
console.log(response);
if (response.code == 0) {
$("#errorll").text(response.msg);
$('.cd-popup3').addClass('is-visible3');
$('#errorll1').attr('src');
} else {
console.log(response.code);
$("#errorll").text(response.msg);
$('.cd-popup3').addClass('is-visible3');
$('#errorll1').attr('src');
}
},
error: function() {}
});
}
</script>
看到我的判断了吗?
接下来来一个提示
-你可以使用alert('弹框提示')-
或者是做一个炫酷弹框样式-------- [ 网络上的 ] 不是我的演示哦
我做的比较log了
是不是有点丑...
填入这个提示框...会有一个疑惑...为什么没有显示....也没有看到位置
那是你没有使用指针去看
它存在页面的底层..从样式中可以看到 其中 opacity: 1; visibility: visible;控制是否显示
<!-- start提交信息之后的提示框 -->
<div class="cd-popup3">
<div class="cd-popup-container3">
<div class="cd-buttons">
<p><img id="errorll1" src="./img/dui.jpg" /></p>
<p id="errorll">大</p>
</div>
<a href="#0" class="cd-popup-close">close</a>
</div>
</div>
<!-- end -->
接着
划重点啦!!!
//打开窗口
$('.cd-popup-trigger3').on('click', function(event) {
event.preventDefault();
$('.cd-popup3').addClass('is-visible3');//划重点地方
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup3').on('click', function(event) {
if ($(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup3')) {
event.preventDefault();
$(this).removeClass('is-visible3');//移除这个样式就不会显示这个框了
}
});
//ESC关闭
$(document).keyup(function(event) {
if (event.which == '27') {
$('.cd-popup3').removeClass('is-visible3');//移除这个样式就不会显示这个框了
}
});
cd-popup-container3控制提示框显示的位置 由于使用了
position: relative; width: 400px; margin: 261px auto;与top的距离
<style>
/* 提示框样式 */
.cd-popup3 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
/*-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;*/
z-index: 20;
}
.cd-popup3.is-visible3 {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container3 {
position: relative;
width: 400px;
margin: 250px auto;
height: auto;
padding: 20px 15px;
background: #FFF;
border-radius: .4rem .4rem .4rem .4rem;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cd-buttons {
overflow: hidden;
}
.cd-buttons p img {
display: block;
max-width: 100%;
margin: 0 auto;
margin-top: 38px;
margin-bottom: 20px;
}
.cd-popup-container3 p {
text-align: center;
color: #333;
font-size: 14px;
line-height: 28px;
}
.cd-popup-close {
position: absolute;
right: 10px;
top: 10px;
color: #000000;
z-index: 10;
width: auto;
height: 1.25rem;
display: block;
font-size: 14px;
}
.is-visible3 .cd-popup-container3 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
</style>
好啦~~结束
=-= 如果你有更加方便的方法 可以给我留言哦~
thanks your 思密达 =&= -- =^ - ^= --
