模态出现然后消失-laravel叶片

Question

I have a modal in my blade file, which appears when I click 'delete' however it fades almost instantly. There are no .js files being double loaded.

I have created a fiddle and loaded all of the same .css and .js files and the same HTML as I am using and it works fine so I dont know why in my app it does not work, any suggestions??

https://jsfiddle.net/cctqdm75/2/

<!-- Main content -->
        <section class="content">
            <!-- Your Page Content Here -->
            <div class='row'>
    <div class='col-md-12'>
        <!-- Box -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Table of organisations</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="box-body">
                <p>Lists all organisations, with controls to edit, delete etc.</p>
                                <p><a href="2">test inc</a> -- <a href="2/edit"><i class="fa fa-edit"></i>Edit</a> -- <a href="2/delete" data-toggle="modal" data-target="#delModal" name="delete" id="delete"><i class="fa fa-trash"></i>Delete</a></p>

                               </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div><!-- /.col -->
</div><!-- /.row -->

                   <!-- delete Modal -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Delete Organisation</h4>
                </div>
                <div class="modal-body">


                    <div class="form-group">
                        <div class="col-md-12">
                            Deleting an organisation means all records relating to the organisation are purged from the database.<br>
                            There is no way to recover from this! <br>
                            Type DELETE in the box below to delete test inc.<br>                            
                            <input type="text" id="del" class="form-control" name="del" onkeypress="checkdel(this.value)" onkeyup="checkdel(this.value)"/>
                            <input type="hidden" name="_token" value="xyxyxyxyxyxyxyxyxyxy">
                            <input type="hidden" name="ref" value="http://localhost:8000/organisations/manage">

                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <input type="btn" class="btn btn-primary" id="btndel" value="Delete" disabled onclick="location.href='/organisations/2/delete'"></input>

                    <input type="btn" class="btn btn-primary" value="Cancel" data-dismiss="modal"></input>
                </div>
            </div>
        </div>
    </div>

        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->

Answer 1

If you want to be certain check the versions of jQuery and Bootstrap in jsfiddle that you posted in external resources and use the same version from jsfiddle in your code. If that fixes your modal not fading you know that it was the versions of Bootstrap and jQuery are not compatible.