0

Есть такой код:

$(document).ready(function() {

  $(".mymagicoverbox").click(function() {
    $('#myfond_gris').fadeIn(300);
    var iddiv = $(this).attr("iddiv");
    $('#' + iddiv).fadeIn(300);
    $('#myfond_gris').attr('opendiv', iddiv);
    return false;
  });

  $('#myfond_gris, .mymagicoverbox_fermer').click(function() {
    var iddiv = $("#myfond_gris").attr('opendiv');
    $('#myfond_gris').fadeOut(300);
    $('#' + iddiv).fadeOut(300);
  });

});
  nav {
  margin: auto;
  width: 800px;
  height: 50px;
}

.topnav {
  background-color: #fff;
  font-size: 16px;
  margin-top: 20px;
  margin-left: 60px;
  z-index: 1000;
}

.topnav a {
  color: #000;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
  font-size: 15px;
}

.topnav .icon {
  display: none;
}

.fond {
  position: absolute;
  padding-top: 0px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1289aa;
}

.mymagicoverbox {
  display: inline-block;
  color: #ffffff;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  font-weight: 300;
  font-family: 'Roboto';
  -webkit-box-shadow: 0 1px 3px 0 #b5b5b5;
  border: 1px solid #a4b9a5;
  background-color: #cb2025;
}

#myfond_gris {
  display: none;
  background-color: #000000;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  z-index: 9998;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<nav>
  <div class="topnav" id="myTopnav" style="text-align: center;">
    <a class="menubutton" href="index.html">Home</a>
    <a class="menubutton" href="about.html">About</a>
    <a class="menubutton" href="gallery.html">Gallery</a>
    <a class="menubutton" href="info.html">Info</a>
    <a class="menubutton mymagicoverbox" iddiv="box_1" href="login.php">Login</a>
    <a class="menubutton" href="bookings.html">Bookings</a>
  </div>
</nav>
<div align="center" class="fond">
  <div id="myfond_gris" opendiv=""></div>
  <div align="center" style="padding-top:35px;"></div>
</div>

Мне нужно чтобы при нажатии на Login всплывало модальное окно с формами, перепробовал много всего, но всегда есть ошибка, или вообще ничего не отображается или окно очень большое и не уменьшается никак. Подскажите в чем проблема?

2 ответа 2

0

Всплывающее окно на bootstrap-4.3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="modal" data-target="#login">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Bookings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="ModalLogin" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Источник.

0
<a class="menubutton mymagicoverbox" iddiv="box_1" href="login.php">Login</a>

href не будет мешать здесь?

Дальше, fond перекрывает полностью окно, за ним ничего не видно. Нужно менять z-index или лучше сделать background-ом. У #myfond_gris стоит display: none и ты нигде его после этого не убираешь/не меняешь.

Вот что у меня получилось.

Модального окна здесь попросту нет, так что оно меняет цвет бекграунда ¯_(ツ)_/¯

2
  • @doox911, а как можно сделать модальное окно вместо смены бекграунда?
    – asdas
    21 фев 2019 в 4:20
  • @asdas, ты ведь открываешь какой то див, но он пустой. Добавь туда еще див, который будет иметь форму уже.
    – dEWY
    21 фев 2019 в 9:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.