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

Posted 2023-02-24

【中文标题】Laravel 应用程序中的引导模式窗口未显示

【英文标题】：Bootstrap modal window in Laravel app not showing

【发布时间】：2019-11-16 10:42:30

【问题描述】：

我正在编写一个 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'));
    

【问题讨论】：

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

您是否在浏览器console中遇到任何错误？

@DhananjayKyada 不，我没有收到任何错误？

@Jovs 在 js 文件中你会看到我正在用它做的所有事情。使用检查器时看不到 html 元素

那说明你的ajax不成功

【参考方案1】：

嘿，从不使用 HTML 元素来制作有价值的可点击模式。 我建议您使用 add value ，可以是“ID”，然后在其上添加模态属性，然后繁荣一切都很好。

【参考方案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);
);

【参考方案3】：

您需要在链接中指定 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>