Why does not my mode close?

Question

Why does not my mode close?

Navigation

#1 by (1 votes)

1

Why does not my modal close?

I could not find anything wrong, especially when compared to other similar modals I have.

When I click the close button, it does not dismiss, I do not understand.

The JS is added and I have other similar modalities on my system, I do not know what's wrong with this one.

Can anyone help me?

    <!-- Modal -->
<div class="modal fade" id="adicionar" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adicionar</h4>
            </div>

            <div class="modal-body">
                {{ Form::open(array('route' => array('tipos.store'), 'method' => 'POST')) }}
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="">Nome do tipo</label>
                            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                            <input type="text" placeholder="Casa, Apartamento, Sobrado..." required name="nome" id="" class="form-control">
                        </div>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

css bootstrap

asked by anonymous 31.12.2017 / 22:46

1 answer

Contact Page works on GitHub Pages? Open a Script and close another

score 1 · Answer 1

There are no errors in the posted code, but it would be necessary that you put in your question the library used and the way you open the modal according to the examples below

1 - Auto

 $("#adicionar").modal('show');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--Modal--><divclass="modal fade" id="adicionar" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adicionar</h4>
            </div>

            <div class="modal-body">
                {{ Form::open(array('route' => array('tipos.store'), 'method' => 'POST')) }}
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="">Nome do tipo</label>
                            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                            <input type="text" placeholder="Casa, Apartamento, Sobrado..." required name="nome" id="" class="form-control">
                        </div>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

2- Clicking

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#adicionar">Abrir Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="adicionar" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adicionar</h4>
            </div>

            <div class="modal-body">
                {{ Form::open(array('route' => array('tipos.store'), 'method' => 'POST')) }}
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="">Nome do tipo</label>
                            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
                            <input type="text" placeholder="Casa, Apartamento, Sobrado..." required name="nome" id="" class="form-control">
                        </div>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>