gpt4 book ai didi

javascript - PHP 中的模式与 php include

转载 作者:行者123 更新时间:2023-11-28 05:57:40 25 4
gpt4 key购买 nike

我尝试在 PHP 中使用包含函数的模态,但我猜 header.php 文件存在错误。

这是模式的代码:

<!DOCTYPE html>
<html>
<head>
<title></title>
<?php include 'header.php'; ?>
</head>
<body>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>

</div>
</body>
</html>

这是 header.php 文件中的内容:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
<script type="text/javascript" src="file.js"></script>

编辑:

错误是css文件和js文件无法处理。但是当我这样做时,它起作用了:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>

</div>
</body>
</html>
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

</script>

最佳答案

您根本没有提供太多代码……但是,您的模式将立即无法打开,因为您没有在 <button> 上指定任何触发器。 。将其更改为:

<button id="myBtn" data-toggle="modal" data-target="#myModal">Open Modal</button>

最好阅读Bootstrap Modals了解您需要如何触发它们。

<小时/>

如果外部 CDN 未正确包含您的文件,请检查您的开发者控制台是否显示任何错误/文件被阻止加载。

关于javascript - PHP 中的模式与 php include,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37516909/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com