【问题标题】:Modal Not Showing Up on laravel模态没有出现在 laravel
【发布时间】:2021-10-26 21:06:03
【问题描述】:

我一直在 laravel 中制作一个 crud 应用程序。在我决定更改一些代码之前,该应用程序运行良好。当我早些时候运行代码时,模态出现了,几个小时前我测试时它工作正常。但是现在当我尝试点击添加按钮时,网址只是改变了,什么也没有了。如果有人可以帮助我,我将不胜感激。我刚刚学习 laravel 几个月了。这是我的代码。

@extends('layouts.master')

@section('content')

 <div class="container">
<div class="row p-3">
    <div class="col-md-11 card p-3">
        <h5 class="text-center text-primary">Products</h5>
        <div class="form-group">
            
            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                <i class="fa fa-plus"></i>
            </a>
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                        ...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
        </div>
    </div>
</div>  
</div>
@endsection

我只想在单击按钮时弹出模态框。即使现在没有任何显示在模态上。 js 和 cdn 链接都包含在我的文件中。

【问题讨论】:

  • Right click -> Click inspect -> Select console
  • 我在发布问题之前尝试过。控制台不显示任何错误或警告。

标签: javascript laravel twitter-bootstrap


【解决方案1】:

data-bs-toggledata-bs-target中删除bs

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  <i class="fa fa-plus"></i>
</a>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-02-08
    • 2014-03-15
    • 2020-12-12
    • 2017-04-09
    • 2018-01-17
    • 1970-01-01
    • 2019-01-19
    • 2012-12-13
    相关资源
    最近更新 更多