dalmariko
@dalmariko
Ни рыба ни мясо. Програмясо

Модальное окно — внешний файл *.html, такое возможно в Bootstrap?

Есть модальное окно. Можно ли его подключить из другого файла *.html.?
Например:

модальное окно под именем sing.html

<!DOCTYPE html>
<html lang="ru-UA">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Вход на сайт</title>

    <!-- Bootstrap -->
    <link href="css/mystyle.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- font awesom shrift -->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
      <body>
    
       <!-- HTML-код модального окна -->
<div id="myModalBox" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Хотите получать больше информации? Авторизируйтесь.</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        
        <form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail" class="col-xs-2 control-label">Адрес email:</label>
    <div class="col-xs-8">
      <input type="email" name="mail" class="form-control" id="inputEmail" placeholder="Введите email" required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-xs-2 control-label">Пароль:</label>
    <div class="col-xs-8">
      <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Введите пароль" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-8">
      <div class="checkbox">
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
</form>
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
       <button type="submit" class="btn btn-success">Регистрация</button>
        <button type="submit" class="btn btn-primary">Войти</button>
      </div>
    
  </div>
</div>
    </div>
 
    
</body>
    </head>
</html>

Должно вызваться по такой конструкции.

<button type="button" class=" btn btn-default  navbar-btn"><a href="sing.html"  data-target="#myModalBox" data-toggle="modal"  >Войти</a></button>


Но не вызывается. Можно ли так сделать, а если нет то как тогда люди поступают?
  • Вопрос задан
  • 2486 просмотров
Решения вопроса 1
iiiBird
@iiiBird Куратор тега Bootstrap
Пока ты спишь - твой конкурент совершенствуется
люди поступают к примеру так:
1) https://jsfiddle.net/vh88u4uh/
2) html для модалки одно, а в него уже в зависимости от нажатой кнопки - аяксом подгружается нужный контент.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dpigo
@dpigo
Front-end developer
Получайте страницу через get-запрос и вставляйте в нужный контейнер. Или используйте iframe.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы