大佬教程收集整理的这篇文章主要介绍了如何打开我的jQuery模式和我的元素一样宽但不宽?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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 …
它涉及一些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; }
以上是大佬教程为你收集整理的如何打开我的jQuery模式和我的元素一样宽但不宽?全部内容,希望文章能够帮你解决如何打开我的jQuery模式和我的元素一样宽但不宽?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。