Question

我有多个Modals通过div容器中的ajax从单独的文件加载，当用户点击主页面上的打开按钮时第一个模态打开，第二个模态从第一个模态的按钮打开。

问题是当我点击第二个Modal的关闭按钮时它第一次关闭得很好但是当我第二次点击它时它根本没有响应。只有当我几次关闭背景时才点击它。我的代码示例如下。

我正在使用Jquery 2.1.1和bootstrap 3.2.0

的index.html

<!DOCTYPE html>

<html class="no-js" dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<link href="assets/bootstrap.css" rel="stylesheet" type="text/css">
<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap.js" type="text/javascript"></script>

<title></title>
</head>

<body class="fixed-header">
  <div class="full-height sm-p-t-30 full-height-adjust">
    <a data-target="#selectOptions" data-toggle="modal" href="#" id=
    "loadOptions">Open</a>
 </div>

    <div id="SelectOptionsContainer"></div>
  </body>
</html>

JS

window.onload = function() {
    //loading Modal content into dom  first and then displaying the modal.
    $("#loadOptions").click(function(e) {
        $.ajax({
            url: 'SelectOptions.html',
            dataType: 'text',
            success: function(data) {
                // todo:  add the html to the dom...
                $("#SelectOptionsContainer").html(data);
                $('.modal').modal({
                    show: true
                });
                //loading Modal content into dom  first and then displaying the modal.
                $("#requestCert").click(function() {
                    $.ajax({
                        url: 'RequestCertificate.html',
                        dataType: 'text',
                        success: function(
                            data) {
                            // todo:  add the html to the dom...
                            $("#selectOptions").append(data);
                            $('.modal').modal({show: true})
                        }
                    });
                });
            }
        });
    });
}

模态1 selectOptions.html

<div class="modal fade slide-up" id="selectOptions">
    <div class="modal-dialog modal-lg">
        <div class="modal-content-wrapper">
            <div class="modal-content">
                <div class="modal-header clearfix text-left">
                    <button class="close pull-right" data-dismiss="modal" type=
                    "button"><span>&times;</span></button>

                    <h4 class="modal-title" id="modalSlideUpLabel">slide2</h4>
                </div>

                <div class="modal-body">
                    <ul>
                        <li>
                            <a class="cui-btn-border cui-btn cui-full-width"
                            data-toggle="modal" href="#" id="installCert">Slide
                            1 ( No modal attached)</a>
                        </li>

                        <li>
                            <a class="cui-btn-border cui-btn cui-full-width"
                            data-target="#requestCertificate" data-toggle=
                            "modal" href="#" id="requestCert">Slide 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

模式2 RequestCertificate.html

<div class="modal fade slide-up" id="requestCertificate">
    <div class="modal-dialog modal-lg">
        <div class="modal-content-wrapper">
            <div class="modal-content">
                <div class="modal-header clearfix text-left">
                    <button class="close pull-right fa fa-close fs-14"
                    data-dismiss="modal" style="font-style: italic" type=
                    "button"></button>

                    <h4 class="modal-title" id="modalSlideUpLabel">Slide
                    2</h4>
                </div>

                <div class="modal-body">
                    <h5>test 2:</h5>
                </div>

                <div class="modal-footer">
                    <button class="cui-btn cui-btn-med cui-full-width" id=
                    "btnCancel" type="button">Close</button>
                </div>
            </div>
        </div>
    </div><script type="text/javascript">

    $('#btnCancel').click(function(){
    $('#requestCertificate').modal('toggle');
    });
    </script>
</div>

多个bootstrap模式第二次没有关闭

0 个答案: