-3

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

  1. 将模态格式化为两列。
  2. 在左栏中显示来自目录/文件夹的图像。
  3. .txt在右栏中显示来自文件（与文件位于同一目录/文件夹中）的文本值（通常是段落/句子）.jpg。
  4. 当文本太长时，右栏应该自动有滚动条。注意：不要使用 MySQL 或数据库的东西。

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

索引.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
              }
          });
      }

控制器.php

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

    $obj = new Model();

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

执行.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 天。请随时编辑我的代码。提前致谢！

4

1 回答 1

0

将 Overlay div 放在 index.php 本身中

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

并将此 CSS 代码添加到您的 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;
}

现在调用 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>";
}
}
于 2013-09-28T18:24:23.223 回答