How to open my jQuery modal as wide as my elements, but not wider?

Question

Im using jQuery 1.12.4. I have the following DIV, which I intend to open as a dialogue.

<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> 

What I notice is that when I reduce the width of my screen to 320 pixels (to simulate the width of a mobile browser), the dialog opens wider than the total width of the elements - there is a lot of free space for the right to the image. See here Fiddle - https://jsfiddle.net/g4a60Lq7/3/ . How can I make the dialogue open as wide as the elements, and not wider? The following shows how I open a dialog ...

  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"); 

Edit: It is required to publish the image in response to the quieter second plunker ...

Answer 1

You can try this jsfiddle: https://jsfiddle.net/43f5qjc8/7/ . Since the image source is not very reliable, here is another jsfiddle with smaller images from another source: https://jsfiddle.net/43f5qjc8/13/ .

It includes some Javascript to calculate the minimum width needed to display content that can wrap in multiple lines. If there is a way to get the same result using CSS only, I did not find it.

Here is the Javascript code:

 $(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 markup:

 <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> 

And CSS styles:

 body { background-color: gray; } #loginBox { font-family: 'russo_oneregular'; font-size: 20px; display: inline-block; } #loginLogos { position: relative; } .logoRow { display: inline-block; } 

Answer 2

Just use Bootstrap's modular popup structure that is fully responsive.

• no need to configure css.

• easy to configure bootstrap js attribute

   <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/

Answer 3

You need some CSS to change the max-width modal and the size of the window. Here is your modified example: https://jsfiddle.net/elektronik/3ez3tm3f/1/

The main change is .ui-widget.ui-widget-content[class] { max-width: 90vw; } .ui-widget.ui-widget-content[class] { max-width: 90vw; } .

vw - very useful modern widely supported CSS.

Several other changes (compared to your original violin) prevent modal content from overflowing. box-sizing: border-box; present in all modern CSS resets .

Answer 4

make logo sensitive in css:

 #loginBox img { width: 23%; height: auto; } 

and change the width from "auto" to "80%":

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