laravel 模态不显示的可能原因是什么?

lhcgjxsq  于 2023-01-21  发布在  其他
关注(0)|答案(1)|浏览(175)

我有两个模态按钮,并创建了两个模态包括在我的刀片文件,我试图使用,但它似乎不工作,我试图删除其他按钮,但似乎不工作,我假设是这样的情况
是什么原因导致了情态动词没有出现呢?
这是我的按钮模态

<td class="table-danger"><button id="aaaBtn" class="soldbtn btn-warning" data-toggle="modal" data-target="#soldModal{{$data->id}}">SOLD</button></td>
    
    <td class="table-warning"><button id="bbbBtn" class="updatebtn btn-success" data-toggle="modal" data-target="#updateModal{{$data->id}}" >UPDATE</button></td>

    <!-- Modal -->                   
    <div class="modal fade" id="updateModal{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{$data->id}}" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
      <div class="modal-header">
            <img src="assets/images/rice.png">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="col-lg-12">
        <div class="contact-form">
            <form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                <div class="col-lg-12 col-sm-12" align="center">
                <h3>{{$data->title}}</h3>
                <img height="200" width="200" src="productimage/{{$data->image}}">
                <h5 class='m-2'>~ KILOS ~</h5>
                </div>

        </div>
        <div class="row col-12">
        @foreach($modal_data as $modal_data)
        <div class="row sm-6 ml-4 mb-1" class="no-gutters" style="height:25px; width: auto;">
            <p class='text-dark mr-2'><input type="checkbox" name="prod_kilos[]" value="{{$modal_data->kg}}" id="checkitem" class="check-cls"/> {{$modal_data->kg}}kg </p>
            <p class='text-dark'>Qty:</p><input style="width:80px; height:25px;" type="number" name="prod_qty[{{$modal_data->kg}}]" min="1" value="1" max="{{$modal_data->warehouse_qty}}" class="form-control ml-2">
            <input type="hidden" name="product_name[{{$modal_data->kg}}]" value="{{$modal_data->title}}">
            <input type="hidden" name="product_fee[{{$modal_data->kg}}]" value="{{$modal_data->price}}">
            <input type="hidden" name="prod_id[{{$modal_data->kg}}]" value="{{$modal_data->id}}">
        </div>
        @endforeach 
        </div>
        <div class=" col-lg-12 mt-5">
            <button name="submit" type="submit" id="form-submit"  class="submit-btn" >ADD TO CART</button>
        </div>
      </form>
    </div>
    </div>
    <script>
    </div>
  </div>
</div>
<!-- End Modal -->
kyxcudwk

kyxcudwk1#

"有什么问题吗"
我认为它不工作的原因是因为您将错误的data-target设置到按钮:

<button data-target="#updateModal">UPDATE</button>

但在创建模态时,您可以用途:

<!-- Modal -->                   
<div id="updateModalModal{{$data->id}}">
</div>
<!-- End Modal -->

您的data-target属性彼此不对应。

如何解决?

data-target属性应指向页面中的现有元素,将其更改为:

<button data-target="#updateModal{{$data->id}}">UPDATE</button>

<!-- Modal -->                   
<div id="updateModal{{$data->id}}">
</div>
<!-- End Modal -->

应该能解决问题。
希望能有所帮助。在这里阅读更多关于它的信息。

相关问题