Bootstrap Modal无法显示求助：jQuery UI与Bootstrap JS疑似冲突

我帮你分析下问题根源，再给你一套可行的解决方案——你遇到的情况大概率是库加载顺序冲突+z-index层级遮挡共同导致的，而且因为没有语法错误所以不会有JS警告，咱们一步步来修复：

问题核心原因 #

1. 库加载顺序错误：你把jQuery UI放在了Bootstrap之后加载，jQuery UI的部分方法会覆盖Bootstrap的事件绑定逻辑，导致调用.modal('show')时实际执行的不是Bootstrap的模态框方法；
2. 层级遮挡：jQuery UI Dialog的默认z-index会比Bootstrap Modal高，就算Modal正常渲染，也会被Dialog完全挡住，看起来像是没弹出。

分步解决方案 #

1. 调整JS加载顺序（关键） #

把jQuery UI移到Bootstrap之前加载，确保Bootstrap的方法能正常初始化不被覆盖，同时要保证jQuery是第一个加载的依赖库：

<!-- 调整后的JS加载顺序 -->
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- 先加载jQuery UI -->
<script src='js/bootstrap.min.js'></script> <!-- 再加载Bootstrap -->
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lang/es.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

2. 修复Modal的z-index层级 #

添加CSS强制提升Bootstrap Modal的层级，确保它能显示在Dialog之上：

<style>
.modal-backdrop {
    z-index: 1060 !important;
}
.modal {
    z-index: 1070 !important;
}
</style>

3. 给Bootstrap Modal起别名（避免后续冲突） #

为了彻底避免方法名冲突，你可以给Bootstrap的.modal()方法起一个专属别名，确保调用的是Bootstrap的模态框：
在加载完Bootstrap后添加这段代码：

$.fn.bootstrapModal = $.fn.modal.noConflict();

之后所有调用模态框的地方都换成这个别名，比如：

// 替换前
$('.modal').modal('show');
// 替换后
$('.modal').bootstrapModal('show');

4. 优化结构：把Modal移到Dialog外部 #

嵌套模态框本身就不是推荐的交互模式，容易引发各种奇怪问题，建议把Bootstrap Modal的代码移到<body>最外层，脱离jQuery UI Dialog的容器：

<!-- 把Modal从Dialog里移出来，放在body最外层 -->
<div id="hola" class="modal fade" tabindex="-1" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 原有Modal内容不变 -->
        </div>
    </div>
</div>

调整后的完整代码 #

整合了所有修改的完整代码如下：

<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="css/fullcalendar.css">
    <link rel="stylesheet" href="css/bootstrap-iso.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    
    <!-- 新增层级修复CSS -->
    <style>
        .modal-backdrop {
            z-index: 1060 !important;
        }
        .modal {
            z-index: 1070 !important;
        }
    </style>

    <!-- 调整后的JS加载顺序 -->
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src='js/bootstrap.min.js'></script>
    <!-- 给Bootstrap Modal起别名 -->
    <script>
        $.fn.bootstrapModal = $.fn.modal.noConflict();
    </script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
    <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lang/es.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script>
        dialogHorario = $( "#dialogHorario" ).dialog({
            autoOpen: false,
            height: 600,
            width: 600,
            modal: true
        });

        $( ".editarHorario" ).on( "click", function(event) {
            event.preventDefault();
            var asignaturaId = this.id;

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                navLinks: false,
                selectable: true,
                selectHelper: true,
                weekends: false,
                select: function(start, end) {
                    // 使用别名调用Bootstrap Modal
                    $('.modal').bootstrapModal('show');
                },
                eventClick: function(event, element) {
                    $('.modal').bootstrapModal('show');
                    $('.modal').find('#title').val(event.title);
                    $('.modal').find('#starts-at').val(event.start);
                    $('.modal').find('#ends-at').val(event.end);
                },
                editable: true,
                eventLimit: true
            });

            $("#starts-at, #ends-at").datetimepicker();

            $('#save-event').on('click', function() {
                var title = $('#title').val();
                if (title) {
                    var eventData = {
                        title: title,
                        start: $('#starts-at').val(),
                        end: $('#ends-at').val()
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true);
                }
                $('#calendar').fullCalendar('unselect');
                $('.modal').find('input').val('');
                $('.modal').bootstrapModal('hide');
            });

            $.ui.dialog.prototype._focusTabbable = function(){};
            dialogHorario.dialog( "open" );
        });
    </script>
</head>
<body>
    <div id="dialogHorario" title="Horarios de la asignatura" style="display:none;">
        <div class="bootstrap-iso">
            <div id='calendar'></div>
            <div id='datepicker'></div>
        </div>
    </div>

    <!-- Modal移到body最外层 -->
    <div id="hola" class="modal fade" tabindex="-1" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Programar clase</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <label class="col-xs-4" for="starts-at">Inicio: </label>
                            <input type="text" name="starts_at" id="starts-at" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <label class="col-xs-4" for="ends-at">Fin</label>
                            <input type="text" name="ends_at" id="ends-at" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="save-event">Guardar cambios</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

内容的提问来源于stack exchange，提问作者Jorge Antequera