javascript - 如何在同一页面上单击两个不同的图像时显示一个相同的模态？

Question

我的 HTML 页面上有两张图片:

<a id="pop1" href="#"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuFkPwpxwXwgnnwvPHLxW1sCbtPKfqdpz6jApGYbEbeD99Ob-Z" width="30px" height="25px" style="margin-bottom:6px;"> </a>

和

<a id="pop2" href="#"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuFkPwpxwXwgnnwvPHLxW1sCbtPKfqdpz6jApGYbEbeD99Ob-Z" width="30px" height="25px" style="margin-bottom:6px;"> </a>

我的模态代码如下:

<div id="alarmModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Shutdown Machines with less than certain % CPU Utilization after N minutes</h4>
            </div>
            <div class="modal-body">
                <p> Please fill in the specifics below:</p>
                         <form id="alarm_form" action="/create_alarm/" method="POST">{% csrf_token %}
                               <label for="period">Period of inactivity(in minutes):</label>
                              <input type="number" id="period" min="0" max="60" step="5" required>
                               <label for="cpu">CPU Utilization(in %):</label>
                              <input type="number" id="cpu" min="0" max="100" step="1" required>
            <br>
               <div id="alarmresult"></div>
            </div>
            <div class="modal-footer">
                <input class="btn btn-default" id="optimize" type="submit" value="Optimize"></input>
                </form>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div>
        </div>
    </div>
  </div>

在不使用两个单独的 javascript 或 jquery 函数的情况下单击两个图像时如何打开此模式？我的意思是只使用一个 javascript 或 jquery 函数？

Answer 1

在图像中使用 HTML class 属性。

HTML

<img class="loadmodal" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuFkPwpxwXwgnnwvPHLxW1sCbtPKfqdpz6jApGYbEbeD99Ob-Z" width="30px" height="25px" style="margin-bottom:6px;">

JS/jQuery

$(document).on(click, 'img.loadmodal', function(){
    //Load the modal here
});