DIV内のすべての要素の幅とまったく同じJQueryモーダルダイアログを開くにはどうすればよいですか？

Question

私は付随するUIと共にJQuery 1.11を使用しています。私はDIVに基づいてモーダルウィンドウを作成したいと思いますが、DIVに固定幅を指定しないようにしたいと考えています。なぜなら要素の数が変わるからです。しかし、十分な水平画面の不動産があれば、すべての要素を同じ平面に保ちたいと思います（そうでない場合は、ラップすることは問題ありません）。だから私は、このスタイル

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

をして、この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> 

を持っていて、このフィドルから見るように、ここでモーダル

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

を作成するjQueryのだけど - https://jsfiddle.net/fupcjLr4/3/ます場合は、 "Show"リンクをクリックすると、ダイアログが生成されると、要素の1つが次の行に折り返されます。ただし、すべての要素を表示するのに十分な領域がありますが、 "displ ay：inline-block "のようなものです。同じ平面上のすべての要素のサイズでモーダルを開くにはどうすればよいですか？

Answer 1

新しい行にラップを避けるために

#loginLogos { white-space: nowrap;} 

で試してみてください。

Answer 2

幅オプションとフォーカスイベントを使用できます。あなたが表示される前に表示したいdivの幅がわからないので、ダイアログがフォーカスされて幅オプションを設定するまで待つ必要があります。それ以前に設定する必要があります（たとえば、または最大幅を設定する場合はそれ以外の値に設定します）。それ以外の場合は、デフォルトの300になり、内部div幅の計算が乱雑になります。このような何かが動作しているようです：

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を使用すると正確な計算幅が得られます。このように：

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

：

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/

あなたはダイアログとしてそれを割り当てる前に、幅とオプションに#loginBoxの高さを設定することができhttps://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 3

を参照してください。参照：http://codepen.io/anon/pen/qadoxm

Answer 4

あなたの.css

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

使用widthにこれを追加し、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}); 

});