将动态图像参数传递给模态对话框

Question

我正在实现一个系统，用户单击图像并被重定向到另一个网站。在重定向之前会出现一个模式对话框并确认它们将被重定向到另一个网站。

图像由客户端从后端动态添加，客户端为每个图像添加唯一的服务链接，从而：

    <!-- image #1 -->
        <a href="#openModal"> <!-- opens the modal dialog -->
          <div class="service">   
                <img src="img.png"> <!-- unique image -->
          </div>
        </a>
    <!-- image #2 etc -->
        <a href="#openModal"> <!-- opens the modal dialog -->
          <div class="service">   
                <img src="img2.png"> <!-- unique image -->
          </div>
        </a>

<!-- clicking on image #1 -->

    <div id="openModal">
    <p>You will be now redirected to the service provider home page</p>
    <a href="http://unique_link_to_img#1_service" target="_blank">Order</a><!-- link entered in the back end of service that is unique with each service provider image -->
    </div>

在不知道每张图片的特定 ID 的情况下如何实现这一点？

谢谢哦。

Answer 1

你能看看下面的小提琴链接吗：

https://jsfiddle.net/pw8w1x6d/4/

HTML 代码：

<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
          <div class="service">   
                <img src="img.png"> <!-- unique image -->
          </div>
        Open Modal</a>
    <!-- image #2 etc -->
        <a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
          <div class="service">   
                <img src="img2.png"> <!-- unique image -->
          </div>
        Open Modal</a>


<div id="openModal" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>
        <div class="selectedImage"></div>
<a href="javascript:if(document.getElementById('listUpdate').value) window.open(document.getElementById('listUpdate').value);" target="_blank">Submit</a>
    </div>
</div>

jQuery 代码：

$(document).ready(function(){
    $(document).on("click", ".openlink", function(){
        var imagePath = $(this).find("img").attr("src");
        $(".selectedImage").text(imagePath);
    });
});