Как вертикальное диалоговое окно с разной высотой вкладок?

Я знаю, что диалоговое окно jquery ui по умолчанию сосредоточено по центру. Но у меня проблема, когда я помещаю вкладки диалогового окна. Первая - это короткая форма входа, а вторая - более длинная регистрационная форма.Как вертикальное диалоговое окно с разной высотой вкладок?

Когда я открываю диалоговое окно, оно центрируется, но когда я включаю другую вкладку, диалоговое окно не центрируется по вертикали.

Мой вопрос: возможно ли изменить положение диалогового окна с помощью переключающих вкладок?

Вот мой код:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Dialog - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <style type="text/css"> 
    form>div{ 
     margin-bottom: 15px; 
    } 
    form>div>label{width: 30%; display: inline-block;} 
    </style> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="styles.css"> 
    <script> 
    $(function() { 
     dialog = $("#dialog").dialog({ 
      autoOpen: false, 
     modal: true, 
     draggable: false, 
     width: 480, 
     }); 
     $("#open-popUp").on("click", function() { 
      dialog.dialog("open"); 
     }); 
    }); 
    $(function() { 
     $("#dialog").tabs(); 
    }); 
    </script> 
</head> 
<body> 

<h1>Test</h1> 
<button id="open-popUp">open</button> 

<div id="dialog" title="Basic dialog"> 
    <ul> 
    <li><a href="#tabs-login">Login</a></li> 
    <li><a href="#tab-reg">Registration</a></li> 
    </ul> 

    <div id="tabs-login"> 
    <form> 
     <div> 
     <label for="inputEmail">Email:</label> 
     <input type="email" id="inputEmail" placeholder="Email..."> 
     </div> 
     <div> 
     <label for="inputPassword" class="col-sm-3 control-label">Password:</label> 
     <input type="password" id="inputPassword" placeholder="Heslo..."> 
     </div> 
     <button type="submit" class="btn btn-default" id="btn-login">Login</button> 
    </form> 
    </div> 

    <div id="tab-reg"> 
    <form> 
     <div> 
     <label for="inputFirstName">First name:</label> 
     <input type="text" id="inputFirstName" placeholder="Name..."> 
     </div> 
     <div> 
     <label for="inputLastName">Last name:</label> 
     <input type="text" id="inputLastName" placeholder="Name..."> 
     </div> 
     <div> 
     <label for="inputE-mail">E-mail:</label> 
     <input type="text" id="inputEmail" placeholder="E-mail..."> 
     </div> 
     <div> 
     <label for="inputPassword">Password:</label> 
     <input type="password" id="inputPassword" placeholder="Password..."> 
     </div> 
     <div> 
     <label for="inputPassword2">Re-password:</label> 
     <input type="password" id="inputPassword2" placeholder="Re-password..."> 
     </div> 
     <div> 
     <label for="inputBirthday">Birthday:</label> 
     <input type="text" id="inputBirthday" placeholder="Birthday..."> 
     </div> 
     <div> 
     <label for="inputCity">City:</label> 
     <input type="text" id="inputCity" placeholder="City..."> 
     </div> 
     <button type="submit" class="btn btn-default" id="btn-login">Registration</button> 
    </form> 
    </div> 
</div> 


</body> 
</html>

источник

2017-01-26 pzoli

Создано тест скрипку: https://jsfiddle.net/Twisty/t3qnLt2h/ – Twisty

Пожалуйста, объясните, что вы хотите, чтобы произошло при переключении вкладок? Вы хотите, чтобы вкладка 1 имела ту же высоту, что и вкладка 2? Или вы хотите, чтобы диалоговое окно было перестроено таким образом, чтобы оно было сосредоточено в «окне» при каждом переключении вкладок? – Twisty

Я хочу, чтобы диалоговое окно было перестроено таким образом, чтобы оно было центрировано в окне каждый раз, когда я переключаю вкладки. – pzoli

Я нашел полезный пикантное здесь: How to auto-center jQuery UI dialog when resizing browser?

Сниппет использовать это:

$("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});

Работа пример из вашего примера: https://jsfiddle.net/Twisty/t3qnLt2h/4/

JavaScript

$(function() { 
    function recenter(d) { 
    if (typeof d !== "object") { 
     d = $(d); 
    } 
    d.dialog("option", "position", { 
     my: "center", 
     at: "center", 
     of: window 
    }); 
    } 

    dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    draggable: false, 
    width: 480, 
    }); 

    $("#open-popUp").on("click", function() { 
    dialog.dialog("open"); 
    }); 

    $("#dialog").tabs(); 

    $(".ui-tabs-nav a").on("click", function(e) { 
    recenter(dialog); 
    }); 
});

источник

2017-01-26 19:43:50 Twisty

Работает. Thx для справки :) – pzoli

Как вертикальное диалоговое окно с разной высотой вкладок?

ответ

Смежные вопросы