如何为所有模式制作一个脚本?

Posted

技术标签:

【中文标题】如何为所有模式制作一个脚本?【英文标题】:how can I make a single script for all the modal? 【发布时间】:2019-06-14 07:12:05 【问题描述】:

在同一页面上,我有大约十几个图像,并且在每张图像上单击时都会打开一个模式。我为每个模态制作了一个脚本,如何为所有模态制作一个脚本?

<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">&times;</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div> 
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">&times;</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
   var undici = document.getElementById('lele');
   var lele = document.getElementById("img11");

function myLele(el) 
        var ImgSrc = el.src;
        undici.style.display = "block";
        lele.src = ImgSrc;
    
    window.onclick = function (event) 
        if (event.target == undici) 
            undici.style.display = "none";
        
    
</script>
<script>
    var dieci = document.getElementById('jessy');
    var jessy = document.getElementById("img10");

function myJessy(el) 
        var ImgSrc = el.src;
        dieci.style.display = "block";
        jessy.src = ImgSrc;
    
    window.onclick = function (event) 
        if (event.target == dieci) 
            dieci.style.display = "none";
        
    
</script>

我尝试了不同的方法,但不是在同一页面上的多个模式上不起作用。 我可以做一个 foreach () 循环吗?

【问题讨论】:

您正在覆盖 window.onclick 处理程序。请改用window.addEventListener('click', ...); 你在使用bootstrap吗? 是的!我正在使用引导程序 【参考方案1】:

每个元素的 ID 应该是唯一的。将两个图像的 ID 从 myImg 分别更改为 myImg1myImg2 之类的唯一名称。

此外,您无需编写自定义函数来切换模式。只需将 data-toggle="modal" data-target="#lele" 添加到模态 1 图像并将 data-toggle="modal" data-target="#jessy" 添加到模态 2 图像,即可使用 Bootstrap 中的内置模态,如下所示:

<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">

您还需要将data-dismiss 属性添加到关闭按钮,如下所示:

<span class="close" data-dismiss="modal">&times;</span>

检查并运行以下代码片段以获得我上面描述的实际示例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
  <img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
  <div class="modal-content" id="img11">
    <span class="close" data-dismiss="modal">&times;</span>
    <img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
  </div>
</div> 
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
  <img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
  <div class="modal-content" id="img10">
    <span class="close" data-dismiss="modal">&times;</span>
    <img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
  </div>

【讨论】:

以上是关于如何为所有模式制作一个脚本?的主要内容,如果未能解决你的问题,请参考以下文章

如何为所有页面制作一个 CustomScrollView

如何为 MySQL 模型制作 GraphQL 模式?

如何为来自同一个熊猫数据框的所有不同列制作单独的 Seaborn kde 图?

如何为所有分辨率制作全屏图像

如何为 ChatApp 制作 ListView 来管理所有聊天?

如何为包含所有存储行的现有 SQL Server 表生成 INSERT 脚本?