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

remote.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');
});

ProjectController.php

public function show($id)
    {
        $project = Project::findOrFail($id);

        return view('projects.show', compact('project'));
    }

- wik0rl

---

你是在ajax成功后尝试调用模态框吗？你是否使用检查元素看到了你的元素HTML？ - Jovs

你的浏览器控制台有没有出现任何错误？ - Dhananjay Kyada

@DhananjayKyada 没有，我没有收到任何错误信息？ - wik0rl

@Jovs 在 js 文件中，你可以看到我对它所做的一切。当我使用检查器时，我看不到 HTML 元素。 - wik0rl

那就意味着你的ajax请求没有成功。 - Jovs

我没有改变任何东西，但现在我在检查器中看到了一些模态框的代码。但似乎主要部分丢失了。<div class="modal fade show" id="modal" style="display: block;" aria-modal="true"></div> - wik0rl

Answer 1

你需要在链接中指定HTML ID标签。

我建议你尝试这个。

<a data-toggle="modal" id="smallButton" data-target="#smallModal"
 data-attr="{{ route('projects.show', $project->id) }}" title="show">
 <i class="fas fa-eye text-success  fa-lg"></i>
</a>

<!-- small modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" 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>
            </div>
            <div class="modal-body" id="smallBody">
                <div>
                    <!-- the result to be displayed apply here -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // display a modal (small modal)
    $(document).on('click', '#smallButton', function(event) {
        event.preventDefault();
        let href = $(this).attr('data-attr');
        $.ajax({
            url: href,
            beforeSend: function() {
                $('#loader').show();
            },
            // return the result
            success: function(result) {
                $('#smallModal').modal("show");
                $('#smallBody').html(result).show();
            },
            complete: function() {
                $('#loader').hide();
            },
            error: function(jqXHR, testStatus, error) {
                console.log(error);
                alert("Page " + href + " cannot open. Error:" + error);
                $('#loader').hide();
            },
            timeout: 8000
        })
    });
  </script>

- Matthew

Answer 2

在你的 Remote.js 文件中：

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

- Md. Johirul Islam

Answer 3

嘿，制作可点击的模态框时，不要使用HTML元素来添加值。 我建议您在其上添加值，可以是“ID”，然后在其上添加模态框属性，然后一切都很好，正常工作。

- Morley