<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>足球投票</title>
<!-- 定义App端H5 -->
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* list-style: none; */
text-decoration: none;
padding: 0;
margin: 0;
}
::-webkit-input-placeholder {
color: #F2F2F2;
background-image: url('./index4.jpg');
}
.Img1 {
width: 100%;
}
.oDiv2 {
position: fixed;
bottom: 50px;
width: 30%;
background-color: azure;
border-radius: 8px;
right: 30px;
/* display: none; */
}
.Img2 {
display: inline-block;
width: 20px;
height: 20px;
}
.sP1 {
display: inline-block;
height: 20px;
margin-left: 5px;
}
.oDiv3 {
/* display: none; */
width: 90%;
margin: auto;
background-color: #003592;
position: relative;
/* vertical-align:middle; */
/* top:50% */
}
.sP2 {
color: #f2F2f2;
text-align: center;
padding: 15px 0;
}
.Img3 {
position: absolute;
right: 5px;
top: 5px;
}
.oDiv4 {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.Input1 {
display: block;
width: 70%;
height: 40px;
background-image: url('./index4.jpg');
margin: auto;
color: #F2F2F2;
}
.obtn1 {
width: 70px;
margin: 15px auto;
text-align: center;
height: 40px;
display: block;
/* padding: 8px 15px; */
background-color: #F2F2F2;
color: #104198;
}
</style>
</head>
<body>
<div class="oDiv1">
<a href="#">
<img class="Img1" src="./index.jpg">
</a>
<div class="oDiv2">
<img class="Img2" src="./index1.jpg">
<p class="sP1">点我竞猜</p>
</div>
<div class="oDiv4">
<div class="oDiv3">
<p class="sP2">今日竞猜</p>
<img class="Img3" src="./index3.jpg">
<input class="Input1" type="text" placeholder="你支持的球队?" maxlength="15">
<button class="obtn1">提交</button>
</div>
</div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".oDiv2").click(function () {
$(".oDiv4").css("display", "flex")
})
$(".Img3").click(function () {
$(".oDiv4").css("display", "none")
})
$(".obtn1").click(function () {
var name = $(".Input1").val();
$.ajax({
url: "http://dev.flm158.com/api/house/Broker/CreateFeedback",
type: "post",
async: false,
data: JSON.stringify(
{
"Content": name
}
),
contentType: "json",
headers: {
"Authorization": "Bearer " + "8qkV5xukUl4UjFilnYkqkBnO2kUz5UmwE6LYyQOeoymnuajJBsG3IP+/0vEimU="
},
success: function (data) {
alert("提交成功!")
}
});
})
})
</script>
</body>
</html>
足球活动demo
最新推荐文章于 2024-04-04 13:32:26 发布