我如何打开我的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的第二次闯入者...

你可以试试这个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,
            modal: true,
            width: 'auto',
            dialogClass: 'noTitle',
            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', 'width', 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;
}

只需使用完全响应的Bootstrap模式弹出窗口结构即可。

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">   
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">       

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>   
</div>

https://jsfiddle.net/zigri2612/0o41yogx/

您需要一点CSS来修改模式的max-width和框的大小。 以下是您的修改示例：https：//jsfiddle.net/elektronik/3ez3tm3f/1/

主要变化是.ui-widget.ui-widget-content[class] { max-width: 90vw; } .ui-widget.ui-widget-content[class] { max-width: 90vw; } 。

vw是一个非常有用的现代，广泛支持的CSS单元。

其他一些变化（与原来的小提琴相比）可以防止模态内容溢出。 box-sizing: border-box; 存在于所有现代CSS重置中。

上一篇: How do I open my jQuery modal as wide as my elements but no wider?

下一篇: How to pass headers while doing res.redirect in express js