如何在模態彈出窗口中顯示圖像和.txt文件的值？

-3

我需要創建/定製在PHP或Javascript中彈出的模式。我得到了這些要求：如何在模態彈出窗口中顯示圖像和.txt文件的值？

將模式格式化爲兩列。
顯示來自左欄中目錄/文件夾的圖像。
從.txt文件（與.jpg文件位於同一目錄/文件夾中）顯示右列中的文本值（常規段落/發音）。
當文本太長時，右欄應該自動滾動條。注意：不要使用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天。請隨時編輯我的代碼。提前致謝！

來源

2013-09-28 Kaye

喜蘇里亞還在嗎？ – Kaye

對不起，我很少被抓住。什麼是更新？ –

將在您的index.php疊加DIV本身

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

來源

2013-09-28 18:24:23

Surya S - 謝謝！我會嘗試你的建議。但是如何從.txt文件獲取其值後直接將文本放在右欄中？ – Kaye

@Kaye：我編輯了我的答案。 –

還有我的朋友嗎？希望你仍然想幫助我。謝謝 – Kaye

如何在模態彈出窗口中顯示圖像和.txt文件的值？

回答

相關問題