javascript - 首次调用时未显示 Bootstrap 模态

Question

我正在尝试使用 bootstrap 3.0 模态将外部 html 文件加载到使用 jQuery Ajax 加载器的模态中，但是它不会在第一次调用时显示，但会在后续调用中显示。

<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a>

<div class="contianer">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                </button>
                <h4 class="modal-title">
                    <img src="img/logo.png" width="150" alt="SmartAdmin">
                </h4>
            </div>
                <div class="modal-body no-padding">
                </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
$('#myModal').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "?AId=DEPT_ADDUPDATE",
        data: { },
        success: function(data){
            $('.modal-body').html(data);
        }
    });
});
</script>

Answer 1

只需添加:

success: function(data){
        $('.modal-body').html(data);
        $('#myModal').modal("show");
    }