wake-up-neo.com

Bootstrap 3: responsives HTML-Popup

Wie kann ich mit Bootstrap 3 ein responsives HTML-Popup erstellen?

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 reagiert, wenn ich Größe ändern meines Browserfensters _. aber nicht .pane-left und .pane-right - wie kann ich diese beiden auch ansprechen?

EDIT:

wenn ich die model-Lösung verwende, scheint es mehr Probleme zu geben, die ich angehen muss:

      <!-- 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>

der model-Dialog ist nicht absolut standardmäßig vertikal zentriert - wie kann ich das ändern? wie kann ich dann die Größe ändern des Dialogfelds ändern? und ich brauche zwei Spalten - eine links, eine rechts, um ansprechend zu sein. Wie kann mir das Modell dabei helfen? Ich kann es nicht in der Dokumentation der Bootstrap-Website sehen. Ich würde jedoch versuchen, jede Anpassung über js zu vermeiden. 

sie müssen auch klicken Sie auf eine Schaltfläche, um den Dialog zu starten. Ich möchte die Schaltfläche nicht verwenden, um das Dialogfeld zu erhalten. Ich möchte das Popup-Fenster erhalten, wenn das HTML-Dokument geladen wird. ist es möglich?

5
laukok

Die Breite des Pane-Left und Pane-Right muss sich dynamisch ändern, wenn die Größe des Browsers geändert wird, damit er anspricht

Wenn Sie jedoch eine feste Breite angeben, wie width:value in px. Die Größenänderung des Browsers hat keinen Einfluss auf das div!

Ich empfehle Ihnen, eingebaute Klassen von BOOTSTRAP POPUP COMPONENTS zu verwenden.

Erfahren Sie mehr über BOOTSTRAP MODAL POPUPS -> HIER

4
Magesh Kumaar

Habe meine eigene Lösung mit der column-Methode - 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