Modal



Modal dialog
(vzor)


Modální komponentu lze použít jako interaktivní dialog v horní části oblasti hlavního obsahu webu k zobrazení oznámení a shromažďování informací pomocí prvků formuláře od uživatelů webu.


Responzivní vodorovný formulář (nefunkční, pouze ukázka)

Formulář, který zůstane vodorovný, dokud nebude šířka obrazovky okna prohlížeče menší než 850 pixelů: poté se formulář zobrazí svisle místo vodorovně.

Změňte velikost okna prohlížeče, abyste viděli efekt.

<style>
.form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #343F50;
  border-radius: 0.3rem;
  border: 1px solid #4A5463;
}

.form-inline button {
  padding: 10px 20px;
  background-color: #343F50;
  border-radius: 0.3rem;
  border: 1px solid #4A5463;
  max-width: 200px;
  color: white;
  cursor: pointer;
}

.form-inline button:hover {
  background-color: #4A5463;
}

@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>

<form class="form-inline" action="#">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Váš email" name="email">
  <label for="pwd">Heslo:</label>
  <input type="password" id="pwd" placeholder="Vaše heslo" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Pamatuj si mě
  </label>
  <button type="submit">Přihlásit</button>
</form>
Nepřihlášený