Question

我需要在PHP或Javascript中创建/自定义模式弹出窗口。我有这些要求：

将模式格式化为两列。
显示左栏目录/文件夹中的图像。
在右栏中显示.txt文件（与.jpg文件位于同一目录/文件夹中）的文本值（USUALLY PARAGRAPH / SENTENCES）。
当文本太长时，右列应自动滚动条。注意：不要使用MySQL或数据库的东西。

我有一个代码，用于检查图像点击事件（此部分工作）后cPanel中的文件夹中是否存在两个文件（.jpg和.txt）。然后它需要在模式弹出窗口中显示.txt文件和.jpg文件的值。我的代码下面没有调用回复模态的JS函数。但显示一个警告框。警报没有图像，而是显示overlay（）的代码。

的index.php

<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
              }
          });
      }

Controller.php这样

<?php
    include_once("execute.php");

    $obj = new Model();

    switch($_POST["action"]){ 
        case 'readexisting': 
            $obj->readexisting();
        break;      
    } 
?>

execute.php

    <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";
               }
           }

        }
        ?>

我希望你能帮助我。我已经工作了3天。请随时编辑我的代码。提前谢谢！

Answer 1

将覆盖div放在index.php本身

中

<div id='overlay'></div>

并在index.php中添加此CSS代码

#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;
}

现在调用AJAX函数

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
});
}

在您的controller.php中

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>";
}
}

如何在模态弹出窗口中显示图像和.text文件值？

1 个答案: