Làm thế nào để mở jQuery của tôi phương thức rộng như các yếu tố của tôi nhưng không rộng hơn?

Question

Tôi đang sử dụng JQuery 1.12.4. Tôi có DIV sau đây, mà tôi dự định mở dưới dạng hộp thoại.

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

Những gì tôi đang nhận thấy là khi tôi giảm độ rộng của màn hình của tôi lên khoảng 320 pixel (để mô phỏng một chiều rộng trình duyệt di động), hộp thoại được mở rộng hơn so với tổng chiều rộng của các yếu tố - có rất nhiều không gian màu trắng ở bên phải của hình ảnh. Xem Fiddle ở đây - https://jsfiddle.net/g4a60Lq7/3/. Làm thế nào tôi có thể làm cho hộp thoại mở rộng bằng các phần tử và không rộng hơn? Dưới đây là cách tôi đang mở hộp thoại ...

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: Wanted phải đăng hình ảnh để đáp ứng với plunker thứ hai pritishvaidya của ...

Answer 1

Bạn có thể thử jsfiddle này: https://jsfiddle.net/43f5qjc8/7/. Vì nguồn hình ảnh không phải là rất đáng tin cậy, đây là một jsfiddle với hình ảnh nhỏ hơn từ một nguồn khác: https://jsfiddle.net/43f5qjc8/13/.

Nó bao gồm một số Javascript để tính toán chiều rộng tối thiểu cần thiết để hiển thị nội dung, có thể bao bọc trên nhiều dòng. Nếu có một cách để có được kết quả tương tự với CSS chỉ, tôi đã không tìm thấy nó.

Đây là đoạn mã 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"); 
    } 
}); 

Các đánh dấu 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> 

Và phong cách 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

Bạn cần một chút CSS để thay đổi max-width của phương thức và kích thước hộp. Dưới đây là ví dụ đã sửa đổi của bạn: https://jsfiddle.net/elektronik/3ez3tm3f/1/

Thay đổi chính là .ui-widget.ui-widget-content[class] { max-width: 90vw; }.

vw là đơn vị CSS hiện đại, rất hữu ích, widely supported.

Một vài thay đổi khác (so với fiddle gốc) ngăn không cho nội dung phương thức bị tràn. box-sizing: border-box; có mặt trong tất cả modern CSS resets.

Answer 3

làm logo đáp ứng trong css:

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

và thay đổi chiều rộng từ 'tự động' để '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

Chỉ cần sử dụng Bootstrap cấu trúc phương thức popup đó là hoàn toàn đáp ứng .

1. không cần css tùy chỉnh.

2. dễ dàng tùy chỉnh bởi thuộc tính bootstrap js

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