Question

我正在尝试创建一个在屏幕上水平和垂直居中的弹出窗口，最大宽度为窗口宽度的60％，最大高度为窗口高度的60％。当我调整窗口大小时，文本将超出弹出窗口的底部。有没有办法包含文本并使其与弹出窗口的大小成比例？

 
	    $(function() {
    	//----- OPEN
	    $('[data-popup-open]').on('click', function(e) {
		    var targeted_popup_class = jQuery(this).attr('data-popup-open');
		    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

		    e.preventDefault();
	    });

	    //----- CLOSE
	    $('[data-popup-close]').on('click', function(e) {
		    var targeted_popup_class = jQuery(this).attr('data-popup-close');
		    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

		    e.preventDefault();
	    });
    });

    .popup {
	max-width:60%;
	max-height:60%;
	display:none;
  	position: fixed;
 	top: 50%;
 	left: 50%;
    }


    .popup-inner {
	max-width:60%;
	max-height:60%;
	/* padding:40px; */
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	box-shadow:0px 2px 6px rgba(0,0,0,1);
	border-radius:3px;
	color: orange;
	font-size: 4vh;
	background: rgba(0, 0, 0, 0.8);  
	border: 3px solid orange;
	border-radius: 10px;
	border-color: orange;

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="popup" data-popup="popup-1">
	
      <div class="popup-inner"> 
        <p>
		<table>
			<tr>
				<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>	
				<tr><td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>
			<tr>
				<td>Title</td><td>Lorem ipsum dolor sit amet, ut vim clita iracundia, sit alia signiferumque at. Te paulo tempor option cum, vero posse iuvaret has ex, quo e</td><td>Date</td>
			</tr>
	  	</table>
	</p>
    <!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> -->
   <a class="popup-close" data-popup-close="popup-1" href="#"></a> 
  </div>
</div>

Answer 1

怎么样？

将.popup用作容器，使其具有边框，背景和阴影，而不要放在.popup-inner上。

.popup的居中方式是元素的顶部边缘距窗口顶部20％，底部边缘距窗口底部20％，左侧和右侧边缘距左侧和右侧20％分别是窗口的

将所有这些加在一起将得到40％的垂直空间和40％的水平空间，这将实现您60％的宽度和高度。

此处使用.popup来将文本包含在overflow中。

.popup的{{1}}表示overflow: hidden以外的任何内容都将始终被隐藏。

当.popup的{{1}}会在内容超出元素的区域时启用滚动，并且如果所有内容都在元素内，则不会进行滚动。

.popup-inner

overflow: auto

$(function() {
  //----- OPEN
  $('[data-popup-open]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

    e.preventDefault();
  });

  //----- CLOSE
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    e.preventDefault();
  });
});

文本超出弹出窗口的底部

1 个答案: