模态捕捉其他模态的点击答案

【问题标题】：Modal catch click of other modal模态捕捉其他模态的点击
【发布时间】：2017-07-14 09:03:39
【问题描述】：

我有两个模态的问题，在newReservationName至少出现一次之前一切正常，在这种情况下$("#newReservationName").unbind().on('hide.bs.modal', function()
抓住reservationTimeError 的点击，因为按钮是ok 而不是close，就像它进入代码的其他模式一样。当然我可以更改按钮名称，但是为什么模态会捕获另一个模态的事件？

if( view.name != 'month' && end.format() < moment().format()) {
    $('#reservationTimeError').modal('show');
    $('#calendar').fullCalendar('unselect');
    validTime = false;
}
//enable selection, so creation new events, only for Day agenda
if(validTime && view.name != 'month') {
    $('#newReservationName').modal('show');
    //unbind guarantee one fire for the event
    $(".modal-footer > button").unbind().click(function() {
        clicked = $(this).text();
        $("#newReservationName").modal('hide');
    });
    $("#newReservationName").unbind().on('hide.bs.modal', function() {
        if (clicked != "Close"){
            bookingForm.name =document.getElementById('reservationName').value;
            bookingForm.startTime= start.utc().format('HH:mm');
           }
     });
}

两个模态的HTML：

<div class="modal" id="newReservationName" data-backdrop="static"
    data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reservation name</h4>
            </div>
            <div class="modal-body">
                <form novalidate class="simple-form"
                    name="newReservationNameForm">
                    <div class="box-body">
                        <input style="width: 100%;" pattern=".{1,255}"
                            data-ng-model="reservation.name"
                            placeholder="Please insert a valid name for this reservation"
                            required type="text" id="reservationName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                    data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"
                    data-ng-disabled="newReservationNameForm.$invalid">OK</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- Modal that get reservation name -->
<div class="modal modal-danger" id="reservationTimeError"
    data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reservation impossible</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">Your reservation is not valid
                    because the date is previous to the current one</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline"
                    data-dismiss="modal">OK</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案1】：

当然我可以更改按钮名称，但是为什么模态会捕获另一个模态的事件？

我认为你的问题在这里：

$(".modal-footer > button").unbind().click(function() {
     clicked = $(this).text();
     $("#newReservationName").modal('hide');
});

这表示任何modal-footer 与click 在button 上，触发#newReservationName 隐藏（hide.bs.modal）。

您可以通过添加触发此代码的id 模态来修复它：

$("#newReservationName .modal-footer > button").unbind().click(function() {
      clicked = $(this).text();
      $("#newReservationName").modal('hide');
});

【讨论】：