时间戳

首页 > 解决方案 > Bootstrap 4模式不显示

bootstrap-4 - Bootstrap 4模式不显示

问题描述

我的 boostrap 模态不会显示。当我单击编辑按钮时，它不会显示模态，而只会显示阴影背景。

编辑按钮代码

<button type="button" class="edit-modal btn btn-primary" data-toggle="modal" data-target="#editModal" data-id="{{ $user->id }}" data-firstname="{{ $user->firstname }}" data-lastname="{{ $user->lastname }}">
    <span class="glyphicon glyphicon-pencil">Edit</span>
</button>

编辑模式代码

<!-- EDIT MODAL -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-contetn">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Edit</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        @if(isset($user))
            {!! Form::model($user, ['route' => ['user.update', $user->id], 'method' => 'PUT']) !!}

                {!! Form::hidden('id', null, ['id' => 'edit-user-id']) !!}

                {!! Form::label('First Name:') !!}
                {!! Form::text('firstname', null, ['id' => 'edit-user-firstname', 'class' => "form-control"]) !!}

                {!! Form::label('Last Name:') !!}
                {!! Form::text('lastname', null, ['id' => 'edit-user-firstname', 'class' => "form-control"]) !!}


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" style="margin-top:20px" data-dismiss="modal">Cancel</button>
        {!! Form::submit('Save Changes', ['class' => 'btn btn-primary', 'style' => 'margin-top:20px']) !!}
      </div>
        {!! Form::close() !!}
      @endif
    </div>
  </div>
</div>
<!-- END EDIT MODAL -->

Javascript代码

$(function() {
    $('.edit-modal').on('click', function() {
        var id = $(this).data('id');
        var firstname = $(this).data('firstname');
        var lastname = $(this).data('lastname');

        $('#edit-user-id').val(id);
        $('#edit-user-firstname').val(firstname);
        $('#edit-user-lastname').val(lastname);

    });
});

看来我的代码是正确的，但我不知道为什么它没有显示。也许我只是想念一些东西。

标签： bootstrap-4

解决方案

有一个错字，这就是问题所在。

<div class="modal-contetn">在 HTML 第 4 行。

你有conteTN而不是conteNT.

如果您想避免进一步的错误，只需从引导站点复制粘贴模板。https://getbootstrap.com/docs/4.3/components/modal/

编辑： 如果您修复错字，它应该可以工作。检查标签@endif是否放置正确。我无法检查 Laravel 部分。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<button type="button" class="edit-modal btn btn-primary" data-toggle="modal" data-target="#editModal">
    Open modal
</button>

<!-- EDIT MODAL -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Edit</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
      </div>
      
    </div>
  </div>
</div>
<!-- END EDIT MODAL -->


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

推荐阅读