Question

我正在尝试在laravel中创建一个bootstrap模式来编辑sa post，问题是当我单击按钮或锚点时，模态没有出现，在某些情况下它会出现但很快就会消失我不会我知道问题在哪里我是laravel的新手，我认为问题在于链接...

app2.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
    <div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>

    <div class="container">


        @yield('content')

    </div>
    <!--<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->

<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script> 
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>

</body>
</html>

dashboard.blade.php

@extends('layouts.app2')
@section('title')
dashboard
@endsection

@section('content')
<h1>Dashboard</h1><br>

<div class="row">

<div class="col-md-6 col-md-offset-6">

<div>
    <form action="{{url('/post')}}" method="post">
        {{csrf_field()}}
        <div class="form-group">
        <textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
        <!--<input type="hidden" value="{{Session::token()}}" name="_token">-->

     </form>
</div>

</div>

</div><br><br>
@foreach($posts as $post)
<div class="row">

<div class="col-md-6 col-md-offset-6">

<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>

<a href="" id="edit">Edit</a> | <a href="{{url('posts/delete/'.$post->id)}}">Delete</a> | <a href="">Like</a> | <a href="">Dislike</a>
</div>

</div>

<br>
@endforeach


<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

@endsection

app_new.js

$('#edit').click(function(){
$('#edit-modal').modal();

    });

Answer 1

点击链接时使用preventDefault()。

$('#edit').click(function(e){
    e.preventDefault();
    $('#edit-modal').modal();
});

使用模态类为你的div添加id='edit-modal'。

Answer 2

试试这个

<a href="" id="edit" data-toggle="modal" data-target="#modalEdit">Edit</a>

其中#modalEdit是模态标记的id，如

<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">

Answer 3

这是使用jquery调用模态的一种方法，请尝试

$('#myModal').modal('show');

我的自举模式没有出现在laravel中

3 个答案: