html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提交链接</title>
<style>
/* 弹出框 */
#popup-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
text-align: center;
}
.popup-content h3 {
margin-top: 0;
margin-bottom: 10px;
}
.popup-content p {
margin-top: 0;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
/* 输入框样式 */
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
/* 聚焦时边框样式 */
input[type="text"]:focus, textarea:focus {
outline: none;
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>
</head>
<body>
<div id="popup-box" style="display: none;">
<div class="popup-content">
<h3>提交链接</h3>
<form id="myForm">
<label for="websiteName">网站名称:</label>
<input type="text" id="websiteName" name="websiteName"><br>
<label for="websiteLink">网站链接:</label>
<input type="url" id="websiteLink" name="websiteLink"><br><br>
<button type="button" onclick="submitForm()">提交</button>
<button id="popup-close">关闭</button>
</form>
</div>
</div>
<!-- 按钮 -->
<button id="popup-btn">提交链接</button>
<script>
var popupBox = document.getElementById('popup-box');
var popupBtn = document.getElementById('popup-btn');
var popupClose = document.getElementById('popup-close');
// 点击按钮弹出框
popupBtn.addEventListener('click', function() {
popupBox.style.display = 'block';
});
// 点击关闭按钮或遮罩层关闭弹出框
popupClose.addEventListener('click', function() {
popupBox.style.display = 'none';
});
popupBox.addEventListener('click', function(e) {
if (e.target === popupBox) {
popupBox.style.display = 'none';
}
});
function submitForm() {
let websiteName = document.getElementById("websiteName").value;
let websiteLink = document.getElementById("websiteLink").value;
// 创建一个FormData对象
let formData = new FormData();
// 向formData对象中添加数据
formData.append("websiteName", websiteName);
formData.append("websiteLink", websiteLink);
// 发送POST请求
fetch("submit.php", {
method: "POST",
body: formData,
})
.then((response) => response.text())
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error("Error:", error);
});
}
</script>
</body>
</html>
php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$websiteName = $_POST["websiteName"];
$websiteLink = $_POST["websiteLink"];
// 在这里执行提交数据的操作，比如将数据写入数据库或者文件中
}
?>
html手机端适配加判断
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提交链接</title>
<style>
/* 弹出框 */
#popup-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
background-color: #fff;
text-align: center;
}
.popup-content h3 {
margin: 10px;
}
.popup-content p {
margin-top: 0;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
margin: 15px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
/* 输入框样式 */
input {
width: 80%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
/* 手机端样式 */
@media (max-width: 600px) {
.popup-content {
width: 90%;
}
}
/* 聚焦时边框样式 */
input[type="text"]:focus, textarea:focus {
outline: none;
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>
</head>
<body>
<div id="popup-box" style="display: none;">
<div class="popup-content">
<h3>提交链接</h3>
<form id="myForm">
<label for="title">网站名称:</label>
<input type="text" id="title" name="title"><br><br>
<label for="url">网站链接:</label>
<input type="url" id="url" name="url"><br><br>
<button type="button" onclick="submitForm()">提交</button>
<button id="popup-close">关闭</button>
</form>
</div>
</div>
<!-- 按钮 -->
<button id="popup-btn">提交链接</button>
<script>
var popupBox = document.getElementById('popup-box');
var popupBtn = document.getElementById('popup-btn');
var popupClose = document.getElementById('popup-close');
// 点击按钮弹出框
popupBtn.addEventListener('click', function() {
popupBox.style.display = 'block';
});
// 点击关闭按钮或遮罩层关闭弹出框
popupClose.addEventListener('click', function() {
popupBox.style.display = 'none';
});
popupBox.addEventListener('click', function(e) {
if (e.target === popupBox) {
popupBox.style.display = 'none';
}
});
function submitForm() {
let title = document.getElementById("title").value;
let url = document.getElementById("url").value;
if (title.trim() === "" || url.trim() === "") {
alert("请输入网站名称和链接");
return;
}
// 创建一个FormData对象
let formData = new FormData();
// 向formData对象中添加数据
formData.append("title",title);
formData.append("url",url);
// 发送POST请求
fetch("1.php", {
method: "POST",
body: formData,
})
.then((response) => {
if (response.ok) {
alert("提交成功");
document.getElementById("title").value = "";
document.getElementById("url").value = "";
popupBox.style.display = 'none';
location.reload();
} else {
throw new Error("提交失败");
}
})
.catch((error) => {
console.error("Error:", error);
alert("提交失败");
});
}
</script>
</body>
</html>
