Javascript 如何在模式弹出窗口中显示图像和.txt文件值？
我需要用PHP或Javascript创建/定制一个模式弹出窗口。我得到了这些要求：Javascript 如何在模式弹出窗口中显示图像和.txt文件值？,javascript,php,jquery,Javascript,Php,Jquery,我需要用PHP或Javascript创建/定制一个模式弹出窗口。我得到了这些要求： 将模态格式设置为两列 在左列中显示目录/文件夹中的图像 在右栏显示.txt文件（与.jpg文件位于同一目录/文件夹）中的文本值（通常为段落/句子） 当文本过长时，右栏应自动具有滚动条。 注意：不要使用MySQL或数据库的东西 我有一个代码，用于检查在图像单击事件之后cPanel中的文件夹中是否存在两个文件（.jpg和.txt）（此部分有效）。然后需要在模式弹出窗口中显示.txt文件和.jpg文件的值。我下面的代码
.txt.jpg<div class="popup_anchor">
<div class="Thumb popup_element shadow clearfix" id="u2413"><!-- group -->
<img class="grpelem" id="u2471" alt="This Week's Events" src="images/blank.gif" onclick="readexisting()"/><!-- state-based BG images -->
</div>
</div>
<script>
function readexisting() {
jQuery.ajax({
type: "POST",
url: 'controller.php',
data: {action: 'readexisting', arguments: 'your data'},
success:function(data) {
data = data.split("~:~");
alert(data[0]); // message
//alert(data[1]); // content
}
});
}
#overlay{
display: none;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1500;
}
#overlay div{
width: 50%;
float: left;
overflow: auto;
}
函数readexisting（）{
jQuery.ajax({
类型：“POST”，
url:'controller.php'，
数据：{action:'readexisting'，arguments:'your data'}，
成功：功能（数据）{
data=data.split（“~：~”）；
警报（数据[0]）；//消息
//警报（数据[1]）；//内容
}
});
}
<?php
include_once("execute.php");
$obj = new Model();
switch($_POST["action"]){
case 'readexisting':
$obj->readexisting();
break;
}
?>
<head>
<style type="text/CSS">
#overlay {
display: block;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1500;
visibility:hidden;
}
#overlay div {
width:800px;
margin: 100px auto;
background-color: none;/*rgba(255, 255, 255, 0.9)*/
border:none;
padding:15px;
text-align:center;
}
</style>
<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="overlay">
<div>
<img src="events/event-01.jpg" alt="module" style="width:230px; height:313px;">
<p><a href='#close' onclick='overlay()'><img src="images/close_btn.png" alt="module" style="width:15px; height:15px; position:relative; margin-left: 380px; top: -317px;"></a></p>
</div>
</body>
</html>
<?php
class Model {
public function readexisting() {
if (file_exists($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt") && file_exists($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.jpg")) {
echo "<script>";
echo "overlay();";
echo "</script>";
$myFile = ($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt");
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
}
else {
echo "The file $myFile does not exist";
}
}
}
?>
#覆盖层{
显示：块；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
文本对齐：居中；
z指数：1500；
可见性：隐藏；
}
#覆盖分区{
宽度：800px；
保证金：100像素自动；
背景色：无；/*rgba（255、255、255、0.9）*/
边界：无；
填充：15px；
文本对齐：居中；
}
函数覆盖（）{
el=document.getElementById（“覆盖”）；
el.style.visibility=（el.style.visibility=“可见”）？“隐藏”：“可见”；
}
我希望你能帮我做这件事。我已经做了三天了。请随意编辑我的代码。提前谢谢 将覆盖div放在index.php本身中
#overlay{
display: none;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1500;
}
#overlay div{
width: 50%;
float: left;
overflow: auto;
}
jQuery('.grpelem').click(function(e)
{
jQuery.ajax(
{
type: "POST",
url: 'controller.php',
data: {action: 'readexisting', arguments: 'your data'},
success:function(data)
{
jQuery('#overlay').html('data'); // Output of the controller.php is placed in the overlay DIV
jQuery('#overlay').show('fast'); // Show the Overlay DIV
close_handler();
}
});
});
function close_handler()
{
jQuery('#popup-close').click(function(e)
{
jQuery('#overlay').hide('fast'); // When the close button is clicked it will close the pop up
});
}
if(isset($_POST['action']))
{
if($_POST['action']=="readexisting")
{
echo "<div><img src='events/event-01.jpg' alt='module' style='width:230px; height:313px;'></div>";
if(file_exists($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt"))
{
$text_content=file_get_contents($_SERVER['DOCUMENT_ROOT']."/Proj/events/folder-01/event-01.txt");
echo "<div>$text_content</div>";
}
echo "<div id='popup-close'>Close</div>";
}
}
if（isset（$\u POST['action']））
{
如果（$_POST['action']==“readexisting”）
{
回声“；
如果（文件\u存在（$\u服务器['DOCUMENT\u ROOT'].“/Proj/events/folder-01/event-01.txt”））
{
$text\u content=file\u get\u contents（$\u SERVER['DOCUMENT\u ROOT'.]。“/Proj/events/folder-01/event-01.txt”）；
回显“$text\u content”；
}
呼应“关闭”；
}
}