Jak mogę otworzyć mój mod jQuery tak szeroki jak moje elementy, ale nie szerszy?

Question

Używam JQuery 1.12.4. Mam następujący DIV, który zamierzam otworzyć jako dialog.

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

Co mam zauważyć, że kiedy zmniejszyć szerokość mojego ekranu do około 320 pikseli (do symulacji mobilnych szerokość przeglądarki), okno otwiera się szerzej niż całkowita szerokość elementów - nie ma dużo białej przestrzeni po prawej stronie obrazów. Zobacz Fiddle tutaj - https://jsfiddle.net/g4a60Lq7/3/. Jak sprawić, by dialog otwierał się tak szeroko, jak elementy, a nie szerszy? Poniżej jest jak jestem otwierając okno ...

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: chcielibyście opublikować zdjęcie w odpowiedzi na drugi plunker pritishvaidya za ...

Answer 1

Można spróbować tej jsfiddle: https://jsfiddle.net/43f5qjc8/7/. Ponieważ źródło obrazu nie jest bardzo niezawodne, tutaj jest inne jsfiddle z mniejszymi obrazami z innego źródła: https://jsfiddle.net/43f5qjc8/13/.

Zawiera JavaScript w celu obliczenia minimalnej szerokości niezbędnej do wyświetlenia zawartości, która może być zawijana na kilku liniach. Jeśli istnieje sposób na uzyskanie tego samego wyniku tylko za pomocą CSS, nie znalazłem go.

Oto kod 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"); 
    } 
}); 

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

A style CSS:

body 
{ 
    background-color: gray; 
} 

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

#loginLogos 
{ 
    position: relative; 
} 

.logoRow 
{ 
    display: inline-block; 
} 

Answer 2

Trzeba trochę CSS zmodyfikować max-width modalu i rozmiaru pudełka. Oto Twój zmodyfikowany przykład: https://jsfiddle.net/elektronik/3ez3tm3f/1/

Główna zmiana to .ui-widget.ui-widget-content[class] { max-width: 90vw; }.

vw to bardzo przydatna nowoczesna jednostka CSS widely supported.

Kilka innych zmian (w porównaniu do oryginalnego skrzypiec) zapobiega przepełnieniu zawartości modalnej. box-sizing: border-box; jest obecny we wszystkich modern CSS resets.

Answer 3

zrobić logo reaguje w CSS:

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

i zmienić szerokość od 'auto' do '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"); 
    } 
    }); 
} 

Answer 4

Wystarczy użyć Bootstrap struktury modalne podręczne, które jest całkowicie reaguje .

1. Nie trzeba niestandardowego css.

2. łatwo dostosować przez Bootstrap js atrybutu

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