如何在JS中单击省略号时以模态显示整个文本？

Question

如何在JS中单击省略号时以模态显示整个文本？

fla*_*ash 7 html javascript css php modal-dialog

我正在处理如下所示的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>

Run Code Online (Sandbox Code Playgroud)

行#A显示以下文本：

ABCSGSGSGSGSGSGSG和
SHSHSGFASGXDS中的洪水问题（...）

问题陈述：

我想知道JS代码，我需要添加，使上的点击（...） ，全文的语气像出现这样。

Answer 1

mic*_*usa 2

这是我对 w3schools 演示中的字符串提取和所需模态功能进行完全测试的实现：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {font-family: Arial, Helvetica, sans-serif;}

    .triggersModal {
        padding: 50px;
        border: solid 2px black;
        margin: 50px;
        cursor: pointer;
    }

    /* The Modal (background) */
    #myModal {
      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 */
    #modalCloser {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    #modalCloser:hover,
    #modalCloser:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
</style>
</head>
<body>

<?php
$episodes = [
    [
        'episode_title' => 'Lorem Ipsum',
        'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
    [
        'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
        'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
    ]
];

foreach ($episodes as $index => $episode) { ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div><?php
            if (strlen($episode['episode_title']) <= 50) {
                echo $episode['episode_title'];
            } else {
                echo substr($episode['episode_title'], 0, 50) , "(...)";
            }
        ?></div>
        <div><?php
            if (strlen($episode['description']) <= 100) {
                echo $episode['description'];
            } else {
                echo substr($episode['description'], 0, 100) , "(...)";
            }
        ?></div>
    </div>
<?php } ?>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalFullTitle"></p>
    <p id="modalFullDescription"></p>
  </div>
</div>

<script>
    // Transfer data from php to javascript
    let episodes = <?php echo json_encode($episodes); ?>, 
        classname = document.getElementsByClassName("triggersModal"),
        modal = document.getElementById("myModal");

    // Bind value insertion and modal display to onclick event of every element with named class    
    for (let i = 0, len = classname.length; i < len; ++i) {
        classname[i].onclick = function() {
            let index = this.getAttribute('data-index');
            document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
            document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
            modal.style.display = "block";
        }
    }

    // Close the modal
    document.getElementById("modalCloser").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";
        }
    }
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

您需要将我的硬编码输入（上面）替换为您的文件抓取内容。要创建数组 $episodes并使用单个循环显示主层的内容，请在<body>要显示可点击的阅读更多框的标记内使用此方法：

<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
    $xml = simplexml_load_file("{$src_dir}/{$file}");
    if (!$xml) {
        continue;
    }
    $episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
    $description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
    $episodes[] = ['episode_title' => $episode_title, 'description' => $description];  // used downscript to deliver data to clientside/js
    ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div>
            <?php
            if (strlen($episode_title) <= 50) {
                echo $episode_title;
            } else {
                echo substr($episode_title, 0, 50) , "(...)";
            }
            ?>
        </div>
        <div>
            <?php
            if (strlen($description) <= 100) {
                echo $description;
            } else {
                echo substr($description, 0, 100) , "(...)";
            }
            ?>
        </div>
    </div>
    <?php
    ++$index;
}
?>

Run Code Online (Sandbox Code Playgroud)

注意事项：

所有的点击事件都写在脚本块中，而不是写在 html 中，以保持简洁和可读。
仅当字符串有足够的长度时才需要使用省略号。
使用 .php 将数据从 php 传递到json_encode()js
不要使用die().
我的偏好是不命名仅使用一次的变量（在 php 或 js 中）。虽然也有一些例外，但这是我默认的哲学。
由于查找数组 ( episodes) 是索引数组，因此从单击的元素传递的唯一相关值是索引。属性data-是维护主显示和模态中要显示的数据之间的关系。
不建议使用<table>标签来显示非表格内容。我对页面和模式的样式做了很少的工作。我不想与您提供的演示相差太远。
需要识别的 HTML 元素应该包含一个id方便 JavaScript 的位置。出现在多个位置的元素应包含class.
测试我的脚本后，在主页或模态中显示引用的文本没有问题。
我试图保持语法简单/可读，但我通常更喜欢在 php 和 js 中使用三元运算符（内联条件）。有些人在显示 php 时更喜欢简写<?=和。?>我对此也很满意；选择你喜欢的任何东西。
最后但并非最不重要的一点是，如果您的输入字符串来自不安全的渠道或者它们包含 html，那么使用显示 htmlspecialchars($string, ENT_QUOTES, 'UTF-8')在屏幕上的任何字符串（在计算字符串长度之后，但在显示之前）。这是一个很好的参考：/sf/answers/139729901/

这是我的源代码转移到可运行的 Stackoverflow 片段：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {font-family: Arial, Helvetica, sans-serif;}

    .triggersModal {
        padding: 50px;
        border: solid 2px black;
        margin: 50px;
        cursor: pointer;
    }

    /* The Modal (background) */
    #myModal {
      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 */
    #modalCloser {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    #modalCloser:hover,
    #modalCloser:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
</style>
</head>
<body>

<?php
$episodes = [
    [
        'episode_title' => 'Lorem Ipsum',
        'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
    [
        'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
        'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
    ]
];

foreach ($episodes as $index => $episode) { ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div><?php
            if (strlen($episode['episode_title']) <= 50) {
                echo $episode['episode_title'];
            } else {
                echo substr($episode['episode_title'], 0, 50) , "(...)";
            }
        ?></div>
        <div><?php
            if (strlen($episode['description']) <= 100) {
                echo $episode['description'];
            } else {
                echo substr($episode['description'], 0, 100) , "(...)";
            }
        ?></div>
    </div>
<?php } ?>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalFullTitle"></p>
    <p id="modalFullDescription"></p>
  </div>
</div>

<script>
    // Transfer data from php to javascript
    let episodes = <?php echo json_encode($episodes); ?>, 
        classname = document.getElementsByClassName("triggersModal"),
        modal = document.getElementById("myModal");

    // Bind value insertion and modal display to onclick event of every element with named class    
    for (let i = 0, len = classname.length; i < len; ++i) {
        classname[i].onclick = function() {
            let index = this.getAttribute('data-index');
            document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
            document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
            modal.style.display = "block";
        }
    }

    // Close the modal
    document.getElementById("modalCloser").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";
        }
    }
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
    $xml = simplexml_load_file("{$src_dir}/{$file}");
    if (!$xml) {
        continue;
    }
    $episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
    $description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
    $episodes[] = ['episode_title' => $episode_title, 'description' => $description];  // used downscript to deliver data to clientside/js
    ?>
    <div class="triggersModal" data-index="<?php echo $index; ?>">
        <div>
            <?php
            if (strlen($episode_title) <= 50) {
                echo $episode_title;
            } else {
                echo substr($episode_title, 0, 50) , "(...)";
            }
            ?>
        </div>
        <div>
            <?php
            if (strlen($description) <= 100) {
                echo $description;
            } else {
                echo substr($description, 0, 100) , "(...)";
            }
            ?>
        </div>
    </div>
    <?php
    ++$index;
}
?>

Run Code Online (Sandbox Code Playgroud)

	// Transfer data from php to javascript
	let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}], 
		classname = document.getElementsByClassName("triggersModal"),
		modal = document.getElementById("myModal");
			
	// Bind value insertion and modal display to onclick event of every element with named class	
	for (let i = 0, len = classname.length; i < len; ++i) {
		classname[i].onclick = function() {
			let index = this.getAttribute('data-index');
			document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
			document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
			modal.style.display = "block";
		}
	}

	// Close the modal
	document.getElementById("modalCloser").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";
	    }
	}

Run Code Online (Sandbox Code Playgroud)

另一个可运行的片段已被调整为单独呈现单元格文本......

	body {font-family: Arial, Helvetica, sans-serif;}

	.triggersModal {
		padding: 50px;
		border: solid 2px black;
		margin: 50px;
		cursor: pointer;
	}

	/* The Modal (background) */
	#myModal {
	  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 */
	#modalCloser {
	  color: #aaaaaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	}

	#modalCloser:hover,
	#modalCloser:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

	<div class="triggersModal" data-index="0">
		<div>Lorem Ipsum</div>
		<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
	</div>
	<div class="triggersModal" data-index="1">
		<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
		<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
	</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span id="modalCloser">&times;</span>
    <p id="modalFullTitle"></p>
	<p id="modalFullDescription"></p>
  </div>
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

	// Transfer data from php to javascript
	let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}], 
		classname = document.getElementsByClassName("triggersModal"),
		modal = document.getElementById("myModal");
			
	// Bind value insertion and modal display to onclick event of every element with named class	
	for (let i = 0, len = classname.length; i < len; ++i) {
		classname[i].onclick = function() {
			let index = this.getAttribute('data-index'),
                content = this.getAttribute('data-content');
			document.getElementById("modalText").innerHTML = lookup[index][content];
			
			modal.style.display = "block";
		}
	}

	// Close the modal
	document.getElementById("modalCloser").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";
	    }
	}

Run Code Online (Sandbox Code Playgroud)

这是上述 php 执行的 Pastebin 转储：https ://pastebin.com/YnhNq6rD

归档时间：	6 年，6 月前
查看次数：	407 次
最近记录：	6 年，6 月前