Modal of Bootstrap does not open

Question

Modal of Bootstrap does not open

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Good, I have looked for possible solutions but with them I can not solve the problem.

I try to open a modal window with Bootstrap but that does not open when I press the button.

<form class="form-inline">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">Login</button>

                <!--modal -->
                <!-- Modal -->
                    <div id="login" class="modal fade" role="dialog">
                      <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Login</h4>
                          </div>
                          <div class="modal-body">
                            <p>Some text in the modal.</p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>

                      </div>
                    </div>

                <!--modal -->
                <script>
               $("#login").dialog({
                  modal: true,
                  buttons: {
                    Ok: function() {
                      $( this ).dialog( "close" );
                    }
                  }
                });
              </script>

                <button type="subtmit" class="btn btn-success">Registrarse</button>
        </form>

I've already tried putting the jquery call before the bootstrap js

<script serc="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

But it does not work that way either

jquery bootstrap

asked by Rodrypaladin 16.08.2016 в 20:48

source

3 answers

Validate if the data is null Select data-attribute within SVG

score 2 · Answer 1

The detail is in how you call the modal, replaced .dialog by .modal of your script

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form class="form-inline">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">Login</button>

                <!--modal -->
                <!-- Modal -->
                    <div id="login" class="modal fade" role="dialog">
                      <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Login</h4>
                          </div>
                          <div class="modal-body">
                            <p>Some text in the modal.</p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>

                      </div>
                    </div>

                <!--modal -->
                <script>
               $("#login").modal({
              modal: true,
              buttons: {
                Ok: function() {
                  $( this ).modal( "close" );
                }
              }
            });
              </script>

                <button type="subtmit" class="btn btn-success">Registrarse</button>
        </form>

score 0 · Answer 2

0

The Dialog function is typical of Jquery-ui .

Bootstrap uses: modal(); Try with $('#login').modal('show');

answered by 16.08.2016 в 21:00

score 0 · Answer 3

You are not importing JQuery, you have serc instead of src change this:

<script serc="https://code.jquery.com/jquery-3.1.0.min.js"></script>

to this:

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

and what about

$("#login").modal({
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).modal( "close" );
        }
    }
});

It's from jquery-ui , you do not need it.