个人中心
gpt4 book ai didi

javascript - 为链接到文本的图像模式调整 JQuery 代码

转载 作者：行者123 更新时间：2023-11-28 03:11:56 25 4
gpt4 key购买 nike

我有一个当前的模态设置，它使用 jquery 脚本来允许在单个页面上使用多个模态。当前，用户选择一个图像，然后弹出相同的图像作为模态(event.target)。在这个例子中，我希望用户能够选择一个文本字符串，它会弹出一个关联的图像。我很难修改我的代码来这样做。为了清楚起见，我将两个实例都放在一个 jsfiddle 中。任何帮助将非常感激。

https://jsfiddle.net/csapidus/mh3hysrr/12/

jsfiddle 中的相同代码如下:

<title>[BMED] Acrylic Breakdancing Contraption</title>
    <link rel="icon" href="https://c1.staticflickr.com/5/4304/35858762401_3288711c9e_o.png">
    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 

<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->

<style>

    * { box-sizing: border-box; }

    /* force scrollbar */
    html { overflow-y: scroll; }

    body { font-family: sans-serif; }

    /* ---- grid ---- */
    .grid {
        background: ;
    }

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    /* ---- .grid-item ---- */
    .grid-sizer,
    .grid-item {
        width: 32.55%;
        margin-bottom: 10px;
    }

    .grid-item {
        float: left;
    }

    .grid-item img {
        display: block;
        max-width: 100%;
    }



/******************** Image Modals ********************/

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 1.0;}

/* 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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }

}
</style> 

<body>

<div class="footerU">
    <h1>[BMED] Acrylic Breakdancing Contraption</h1>
</div>

<div class="intro_unlim">
    <p> The **** final project required students to develop a contraption with at least three connected moving parts. I elected to model a breakdancer's legs as he prepares for a headspin. Unfortunately, the final product came out looking like more of an upside down crab. The legs are made of thin acrylic,  the wood for the base is walnut, and the wood for the body is paduak. </p>

    <p> Estimated Building Cost: $35.00</p>
    <br>
    <p> Clicking this text should open up a modal that presents the first image</p>
    <p> Clicking this text should open up a modal that presents the second image</p>
</div>


    <div class="full">

    <div class="grid">

      <div class="grid-sizer"></div>

      <div class="grid-item">
        <img id="Img1" class = "modal-img" data-index = "1" src="https://c1.staticflickr.com/5/4352/36316868716_a33d16e02e_b.jpg"/>
      </div>

      <div id="myModal1" class="modal" data-index="1">
          <span class="close">&times;</span>
          <img class="modal-content" id="img01">
          <div id="caption">paduak body of the contraption (cut using a jigsaw, and then sanded) nailed to rectangular walnut base</div>
      </div>

      <div class="grid-item">
        <img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/3/2945/33377180683_9c7b27232f_b.jpg"/>
      </div>

      <div id="myModal2" class="modal" data-index="2">
          <span class="close">&times;</span>
          <img class="modal-content" id="img02">
          <div id="caption">final product: paduak contraption with acrylic legs, a walnut base, and googley eyes</div>
      </div>

    </div>

</div>

<div class="return"> 
    <div id="button"><a href="../index.html">Return to Homepage</a></div>
</div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js"></script>

<script>
// JQuery Method for Multiple Modals 
  $(function() {
    $('body').on('click', '.modal-img', function(event) {
      var $img = $(event.target);
      var index = $img.data('index');
      var $modal = $("#myModal" + index);
      $modal.find('img').attr('src', $img.attr('src'));
      $modal.find('#caption').text($img.attr('alt'));
      $modal.css('display', 'block');
    });

    $('body').on('click', '.modal .close', function(event) {
      var $modal = $(event.target).closest('.modal');
      $modal.css('display', 'none');
    });
  });

    // JQuery Method for Masonry
    var $grid = $('.grid').masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer',
      gutter: 10
    });

    $grid.imagesLoaded().progress( function() {
      $grid.masonry('layout');
    });
</script>

</html>

最佳答案 

`See this jsfiddle link that I have created for you: `

https://jsfiddle.net/beljems/ubvvesrw/

我正在使用$(this)，我希望这对你有帮助:)

关于javascript - 为链接到文本的图像模式调整 JQuery 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45666304/

25 4 0
文章推荐： javascript - Bootstrap v4 切换下拉菜单在本地不起作用，但在公共(public)站点上有效
文章推荐： c++ - C++函数中定义的类变量的作用域
文章推荐： c++ - 友情与传承
文章推荐： javascript - 当 css 存在特定类时隐藏 youtube 侧边栏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com