web-dev-qa-db-ja.com

JSで省略記号をクリックしたときにテキスト全体をモーダルで表示するにはどうすればよいですか？

以下に示すように、特定のワード制限の後にEllipsis（...）を追加したphpコードに取り組んでいます。

 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>';  /* Ellipsis is added after a particular Word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>';  /* Ellipsis is added after a particular Word limit */        
 ?>
 <table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>   /* Line B */
    </tr>
 </table>

Line＃Aは次のテキストを表示します：

の洪水の懸念
ABCSGSGSGSGSGSGおよび
SHSHSGFASGXDS（...）

問題ステートメント：

クリック（...）すると、フルテキストが次のようなモーダルに表示されるように、追加する必要のあるJSコードが何か疑問に思っています- これ 。

javascriptphphtmlcssmodal-dialog
7
flash

そのモーダルでカスタムテキストを使用できるようにするには、変更したデモを使用する必要があります。 https://www.w3schools.com/code/tryit.asp?filename=G4QNZITEFN72

次に、そのモーダルウィンドウで全文を送信できるようにコードを変更します

<?php
    $programs = array();

    foreach ( $xml_files as $file ) {
        $xml = simplexml_load_file($src_dir."/".$file) or die('Unable to load XML');

        $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

        $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

        $programs[] = array("episode_title" => (string) $path_title_en, "description" => (string)$path_description_en;);
    } 

foreach ( $programs as $program ) {
    $episode_title = substr($program["episode_title"],0,50).' <a href="#show_full_title" onClick="showModal(\''.htmlspecialchars($program["episode_title"]).'\')">(...)</a>';  /* Ellipsis is added after a particular Word limit */ 

    $description = $program["description"] = substr($program["description"],0,100).' <a href="#show_full_description" onClick="showModal(\''.htmlspecialchars($program["description"]).'\')">(...)</a>';  /* Ellipsis is added after a particular Word limit */        
?>
    <table>
        <tr>
            <td style="width:8%; text-align:center;"><?php echo $episode_title; ?></td> /* Line A */
            <td style="width:8%; text-align:center;"><?php echo $description; ?></td>   /* Line B */
        </tr>
    </table>
<?php } ?>

そのタグにonClickハンドラーを追加すると、フルテキストでshowModal関数が呼び出されます。

1
Mykola Prymak

モーダルUI、スクリプト、およびコンテンツをモーダルに渡すためのいくつかのロジックでコードを更新するだけです。これを試してみてください。ありがとう

var modal = document.getElementById("readMoreModal");
var btn = document.getElementsByClassName("readMoreModalTrigger")[0];
var closeBtn = document.getElementById("close");

// When the user clicks on <span> (x), close the modal
closeBtn.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";
  }
}

// Append Readmore content in modal
function readMoreMethod(text) {
  document.getElementById("modal-content-append").innerHTML = text;
  modal.style.display = "block";
}
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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 */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

#close:hover,
#close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["episode_title"]')">(...)</a>';  /* Ellipsis is added after a particular Word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a 
class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('$program["description"]')">(...)</a>';  /* Ellipsis is added after a particular Word limit */        
 ?>

<table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?><a class="readMoreModalTrigger" href="JavaScript:Void(0);" onclick="readMoreMethod('tadsad sadsad asdasd asdas dsad ')" href="">(...)</a></td>
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>
    </tr>
 </table>   

<!-- The Modal -->
<div id="readMoreModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span id="close">&times;</span>
    <p id="modal-content-append"></p>
  </div>

</div>
0
Hassan Siddiqui

ここにあなたのためのHTML/CSS/JSがあります。

const trigger = document.querySelector(".trigger");
    trigger.addEventListener("click", () => {
      const fullTextSibling = trigger.previousElementSibling;
      fullTextSibling.classList.add("active");
      const closeModal = document.querySelector(".full_text > div > button");
      closeModal.addEventListener("click", () => {
        fullTextSibling.classList.remove("active");
      });
    });
.full_text {
        display: none;
      }
      .full_text > div {
        min-width: 300px;
        min-height: 100px;
        background: white;
        padding: 20px;
        border-radius: 10px;
      }
      .full_text.active {
        display: flex;
        background: #80808069;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        align-items: center;
        justify-content: center;
      }
<div class="container">
      Lorem, ipsum dolor
      <div class="full_text">
        <div>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          <button>X</button>
        </div>
      </div>
      <a href="#" class="trigger">(...)</a>
    </div>
0
Kamlesh Tajpuri