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

Question

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

图像由客户端从后端动态添加，并且客户端向每个图像添加唯一服务link，结果：

    <!-- 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

请看下面fiddle link:

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);
    });
});

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

Pass dynamic image parameter to modal-dialog

javascript

jquery

modal-dialog

advanced-custom-fields