Laravel 应用程序中的 Bootstrap 模式窗口未显示

Question

我正在编写一个 Laravel 应用程序并尝试实现一个显示元素细节的模式。当我单击链接时，会显示背景但不显示模态窗口。在 chrome 的网络监视器中，它在预览中显示模态窗口。

怎么了？

预先感谢您的帮助！

这是我的代码

index.blade.php

<td>
<a href="{{ route('projects.show', $project->id) }}" class="btn btn-info" data-remote="true">Details</a>
</td>

modal.blade.php

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">@yield('title')</h5>
        </div>
        <div class="modal-body">
          @yield('content')
        </div>
        <div class="modal-footer">
          @yield('footer')
        </div>
    </div>
</div>

show.blade.php

@extends('layouts.modal')
@section('title')
Demo Modal
@endsection
@section('content')
<p>test</p>
@endsection
@section('footer')
    <button type="button" data-dismiss="modal">Close</button>
@endsection

远程.js

$(document).on('ajax:success', function(e, xhr){
    if(!$('#modal').length){
        $('body').append($('<div class="modal" id="modal"></div>'))
    }
   $('#modal').html(xhr.responseText).modal('show');
});

项目控制器.php

$(document).on('ajax:success', function(e, xhr){
    if(!$('#modal').length){
        $('body').append($('<div class="modal" id="modal"></div>'))
    }
   $('#modal').html(xhr.responseText).modal('show');
});

Answer 1

嘿，永远不要使用 HTML 元素来制作有价值的可点击模态。我建议你在上面使用添加值，可以是“ID”，然后在上面添加模式属性，然后一切都很好并且可以工作。