#Bootstrap 3.2.0 # модальные диалоги #jquery

0 Aakash Kumar [2016-07-09 16:57:00]

следующий код, для которого модальный диалог не появляется. Я использую Bootstrap 3.2.0, а jquery также выше 1.9.0. Помогите мне, если я что-то упустил. И, пожалуйста, дайте мне знать за любую дополнительную информацию и спасибо заблаговременно.

<div class="modal fade" id = "login" 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></button>
            <h4 class="modal-title" id="myModal">Login or Registeration </h4>
      </div>
      <div class="modal-body">
        <form action="#" method="POST">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password">
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Login">
            <input type="submit" class="btn btn-primary" value="Register">
          </div>
          </form>
        </div>
        <div class="modal-footer">
          <a href="#" class="btn btn-primary" data-dismiss="modal">
            Forgot Password?</a>
        </div>
      </div>
    </div>
  </div>


<div class="jumbotron" id="home">
  <div class="container-fluid">
    <h1>The Design Store</h1>
    <p>fdgdhfjgkhloj;jlkhhjgfdshjkl
      sgdhfjgkhkjlrtyguuhjkoxcvbn
      dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p>
      <p>wefrgdthyjgukiosdfghjkgh
        ssdfghjklertyuwertyuicvbnm,
        sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p>
        <p><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login">My Account</a></p>
  </div>
</div>

javascript jquery html css bootstrap-modal


1 ответ


1 Решение Jesse Johnson [2016-07-09 17:33:00]

Все верно для разметки (ссылка ниже для просмотра). Убедитесь, что вы используете скрипт jquery.js перед скриптом bootstrap.js.

Рабочая демонстрация вашего кода

<div class="modal fade" id="login" 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></button>
                <h4 class="modal-title" id="myModal">Login or Registeration </h4>
            </div>
            <div class="modal-body">
                <form action="#" method="POST">
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Login">
                        <input type="submit" class="btn btn-primary" value="Register">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-primary" data-dismiss="modal">
            Forgot Password?</a>
            </div>
        </div>
    </div>
</div>
<div class="jumbotron" id="home">
    <div class="container-fluid">
        <h1>The Design Store</h1>
        <p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..
        </p>
        <p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg
        </p>
        <p><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login">My Account</a></p>
    </div>
</div>