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

Answer 2

使用此：

$('#pop1, #pop2').click(function(){
    # open your modal here
})

或者为您的元素提供相同的class：

$('.className').click(function(){
    # open your modal here
})

Answer 3

试试这个

$('#pop1, #pop2').on('click',function(){
    $('#alarmModal').modal('show');
});

Answer 4

在没有javascript的情况下使用数据切换和数据目标属性。

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

<a id="pop2" class="modalClass"  href="#" data-toggle="modal" data-target="#alarmModal"> <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>

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

4 个答案: