Как открыть текстовое диалоговое окно JQuery, которое равно ширине всех элементов в DIV?

Question

Я использую JQuery 1.11 с сопровождающим интерфейсом. Я хотел бы создать модальное окно на основе DIV, однако я бы хотел избежать указания фиксированной ширины на DIV, потому что количество элементов будет меняться. Тем не менее, я хотел бы сохранить все элементы в одном и том же плане, при условии, что будет достаточно горизонтальной экранной недвижимости (если нет, это нормально для их обертывания). Так что у меня есть этот DIV

<div id="loginBox" style="display:none;"> 
    <div>Login/Sign Up To Save Your Race Results</div> 
    <div id="loginLogos"> 
      <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Google_plus.svg/491px-Google_plus.svg.png" height="75" /></a> 
      <a href='#'><img src="https://hilalcenter.files.wordpress.com/2011/08/icon_facebook.png" height="75" /></a> 
      <a href='#'><img src="http://www.freeiconspng.com/uploads/twitter-icon-png-13-1.png" height="75" /></a> 
      <a href='#'><img src="https://image.freepik.com/free-icon/linkedin-logo_318-52856.png" height="75" /></a> 
    </div> 
</div> 

с этим стилем

#loginBox { 
    display: inline-block; 
    background-color: gray; 
} 

и вот JQuery, который создает модальное

var opt = { 
     autoOpen: false, 
     modal: true, 
    } 
    $("#loginBox").dialog(opt); 
    $("#loginBox").dialog("open"); 

но, как вы увидите из этого Fiddle - https://jsfiddle.net/fupcjLr4/3/, если вы щелкните по ссылке «Показать», как только диалог будет создан, один из элементов обернется на следующую строку, хотя есть достаточно места для отображения всех них, и, несмотря на то, что я указал «вытеснить ay: inline-block "на все. Как сделать мой modal открытым по размеру всех элементов на одной плоскости?

Answer 1

Try с

#loginLogos { white-space: nowrap;} 

, чтобы избежать упаковки на новую строку.

Answer 2

Вы можете использовать ширину опцию и фокус событие. Поскольку вы не знаете ширину div, которую хотите показать до ее отображения, вам нужно подождать, пока диалоговое окно не будет в фокусе, чтобы установить параметр ширины. Вам также нужно установить его (либо auto, либо что-то еще, если вы хотите установить максимальную ширину, например), иначе он будет по умолчанию 300, испортив вычисления внутренней ширины. Нечто подобное, кажется, работает:

var opt = { 
    autoOpen: false, 
    modal: true, 
    width: 'auto', 
    focus: function(e) { 
     $(this).dialog('option', 'width', $("#loginBox").width()); 
    } 
} 

https://jsfiddle.net/o5r34a4q/3/

EDIT:

JQuery ширина иногда может возвращать округленное вниз значение, которое в этом случае сделали бы контейнер ширина просто немного короткий. Чтобы уточнить это, вы можете использовать getBoundingClientRect, который даст вам точную вычисленную ширину.Как это:

function open_login_dialog() { 
    var opt = { 
    autoOpen: false, 
    modal: true, 
    width: 'auto', 
    focus: function(e) { 
     $(this).dialog('option', 'width', $("#loginBox")[0].getBoundingClientRect().width); 
    } 
    } 
    $("#loginBox").dialog(opt); 
    $("#loginBox").dialog("open"); 
} 

https://jsfiddle.net/o5r34a4q/5/

См https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 3

Вы можете установить ширину и высоту #loginBox к опциям перед назначением его как диалог:

var opt = { 
     autoOpen: false, 
     modal: true, 
     width: $('#loginBox').width(), 
     height: $('#loginBox').height(), 
    } 
    $("#loginBox").dialog(opt); 
    $("#loginBox").dialog("open"); 

См .: http://codepen.io/anon/pen/qadoxm

Answer 4

добавить это к использованию width.css

#loginLogos img{ 
    width:23%; 
    margin-left:0.7%; 
} 

и height в %, то она будет меняться при изменении его parent.

или же удалить выше и добавьте следующие строки в js

$(document).ready(function(){ 
    var boxWidth = $("#loginBox").width(); 
    alert(boxWidth); 
    var imgWidth = boxWidth/5; 
    alert(imgWidth); 
    $("#loginLogos img").css({"width":imgWidth,"height":imgWidth,"margin-left":2}); 

});