it-swarm.com.ru

Bootstrap 3: отзывчивое HTML-всплывающее окно

Как сделать отзывчивое HTML-всплывающее окно с помощью Bootstrap 3?

HTML,

<div class="center-pane">

  <div class="pane-left">
    Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
  </div>

  <div class="pane-right">

    <form method="post" action="/login/">
      <div class="form-group">
        <label class=" required-field">E-Mail:</label>
        <input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
      </div>
      <div class="form-group">
        <label class=" required-field">Password:</label>
        <input type="password" name="password" required class="form-control" id="id_password">
      </div>
      <button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
      <a href="/omg">I'm desperated!</a>
    </form>
    <div class="misc text-center">
      Some text
      <br>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">HTML5</a>
    </div>
  </div>


</div>

CSS,

/* HTML POPUP
-------------------------------------------------- */
.center-pane {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 1000px;
  height: 320px;
  border:1px solid red;
}

.pane-left,
.pane-right{
    width:480px;
    float:left;
    border:1px solid blue;
}

.center-pane отзывчив, когда я изменяю размер окна моего браузера. но не .pane-left и .pane-right - как я могу сделать эти два отзывчивыми?

Правка:

если я использую решение модели , мне кажется, мне нужно решить больше проблем:

      <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

диалоговое окно model по умолчанию не является абсолютным вертикально центрированным - как я могу это изменить? Кроме того, как я могу изменить размер диалогового окна тогда? и мне нужно два столбца - один слева, другой справа, чтобы быть отзывчивым. как модель может помочь мне сделать это. Я не вижу этого в документации с сайта начальной загрузки. Я хотел бы попытаться избежать каких-либо настроек через JS, хотя. 

также вам нужно нажать на кнопку, чтобы вызвать диалоговое окно. Я не хочу использовать кнопку, чтобы получить диалоговое окно, я хочу получить всплывающее окно при загрузке HTML-документа. Является ли это возможным?

5
laukok

Ширина Панели слева и Панели справа должна изменяться динамически при изменении размера браузера, чтобы сделать его отзывчивым!

Но если вы укажете фиксированную ширину, например, width:value in px. Изменение размера браузера не повлияет на div!

Я рекомендую вам использовать встроенные классы BOOTSTRAP POPUP COMPONENTS ..

Подробнее о BOOTSTRAP MODAL POPUPS -> ЗДЕСЬ

4
Magesh Kumaar

Получил собственное решение с помощью метода столбцов - col col-xs-6,

<div class="pane-left col col-xs-6">
 Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>

<div class="pane-right col col-xs-6">
....

</div>
1
laukok