如何打开我的jQuery模式和我的元素一样宽但不宽？

我正在使用 JQuery 1.12.4.我有以下DIV,我打算将其作为对话框打开.

<div id="loginBox" style="display:none">
    <div>Login/Sign Up</div>
    <div id="loginlogos">
            <a href="/auth/google"><img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
            <a href="/auth/facebook"><img border="0" alt="Facebook" src="http://runtrax.devBox.com:3000/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
            <a href="/auth/twitter"><img border="0" alt="Twitter" src="http://runtrax.devBox.com:3000/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"> </a>
 </div></div>

我注意到的是,当我将屏幕宽度减小到大约320像素(模拟移动浏览器宽度)时,对话框的开口宽度超过了元素的总宽度 – 这里有很多空白区域.右边的图像.在这里看到小提琴 – https://jsfiddle.net/g4a60Lq7/3/.如何使对话框像元素一样宽,而不是更宽？以下是我打开对话框的方式……

var opt;
opt = {
  autoOpen: false,modal: true,width: 'auto',dialogClass: 'noTitle',focus: function() {
    return $(this).dialog('option','width',$('#loginBox').width() + 50);
  }
};
$("#loginBox").dialog(opt);
return $("#loginBox").dialog("open");

编辑：想发布图片以回应pritishvaidya的第二个plunker …

解决方法

您可以尝试这个jsfiddle： https://jsfiddle.net/43f5qjc8/7/.由于图像源不是很可靠,这里是另一个jsfiddle与来自另一个来源的较小图像： https://jsfiddle.net/43f5qjc8/13/.

它涉及一些Javascript来计算显示内容所需的最小宽度,这可能包含在几行上.如果有办法只用CSS获得相同的结果,我还没有找到它.

这是Javascript代码：

$(function () {
    $('.opendialog').click(function () { openDialog(); });
    function openDialog() {
        var opt = {
            autoOpen: false,focus: function () {
                var width = 0;
                $('#loginlogos > .logoRow').each(function () {
                    var x = $(this).position().left;
                    var w = $(this).outerWidth();
                    var tmpWidth = x + w;
                    width = Math.max(width,tmpWidth);
                });
                $('#loginlogos').width(width);
                var outerWidth = $('#loginBox').outerWidth();
                $('#loginlogos').width('auto');
                return $(this).dialog('option',outerWidth);
            }
        };
        $("#loginBox").dialog(opt);
        return $("#loginBox").dialog("open");
    }
});

HTML标记：

<a href='#' class="opendialog">Open</a>
<div id="loginBox" style="display:none">
    <div>Login/Sign Up</div>
    <div id="loginlogos">
        <div class="logoRow">
            <a href="/auth/google"><img border="0" alt="Google" src="..."></a>
            <a href="/auth/facebook"><img border="0" alt="Facebook" src="..."></a>
        </div>
        <div class="logoRow">
            <a href="/auth/twitter"><img border="0" alt="Twitter" src="..."></a>
            <a href="/auth/linkedin"><img border="0" alt="LinkedIn" src="..."></a>
        </div>
    </div>
</div>

和CSS样式：

body
{
    background-color: gray;
}

#loginBox
{
    font-family: 'russo_oneregular';
    font-size: 20px;
    display: inline-block;
}

#loginlogos
{
    position: relative;
}

.logoRow
{
    display: inline-block;
}

原文地址：https://www.jb51.cc/jquery/177300.html