Как открыть мой jQuery модальный, как и мои элементы, но не шире?

Question

Я использую 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 пикселов (для имитации мобильной ширины браузера), диалоговое окно открытия шире, чем общая ширина элементов - есть справа от изображений. См. Здесь Fiddle - 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"); 

Edit: Требуется, чтобы отправить изображение в ответ на второй plunker pritishvaidya в ...

Answer 1

Вы можете попробовать это 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; 
} 

Answer 2

Вам нужно немного CSS, чтобы изменить max-width модального и размерного окна. Вот ваш модифицированный пример: https://jsfiddle.net/elektronik/3ez3tm3f/1/

Главное изменение .ui-widget.ui-widget-content[class] { max-width: 90vw; }.

vw - очень полезный современный блок widely supported CSS.

Несколько других изменений (по сравнению с вашей оригинальной скрипкой) предотвращают переполнение модального содержимого. box-sizing: border-box; присутствует во всех modern CSS resets.

Answer 3

сделать логотип отзывчивым в CSS:

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

и изменить ширину от 'Авто' на '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

Просто используйте Bootstrap модальное всплывающее структуру, которая полностью отзывчивым ,

1. no need изготовленный под заказ css.

2. легко настроить с помощью 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/