Question

我有一个看起来像这样的页面......

<body>

<div id="detailDiv1" style="height 100px; overflow:auto">
</div>

<div id="detailDiv2" style="height 100px; overflow:auto">
</div>

<div id="detailDiv3" style="height 100px; overflow:auto">
</div>

<div id="detailDiv4" style="height 100px; overflow:auto">
</div>

</body>

每个detailDiv都会动态加载内容行（通常是大量行，导致垂直滚动条出现在detailDivs内）。每个detailDiv中的每一行都包含一个小图像，一些文本和几个按钮，这些按钮在DB中递增计数，然后在行本身上动态更新（ajax）。

由于这些详细信息中的每一个都很小，我试图将＆＃34;视图实现为全屏＆＃34;选择，但我正在努力想出一个优雅的计划......

我知道我将使用bootstrap模式来呈现每个detailDiv的全屏版本，我猜我需要从每个detailDiv复制html - 类似于......

$('#myFullScreenModal').html($('#detailDiv1').html());

这将正确加载内容，但当然元素将具有完全相同的名称（因此，除非我先清空原始容器，然后在模态关闭时重新加载，否则与DB的交互将受到干扰）。

但是这些选项对我来说听起来很不好，所以我想知道是否有更标准的方法来实现这种效果，而不必复制大量的html。

感谢您的任何想法。

Answer 1

您可以对问题position: fixed使用div，然后将其展开。这样你根本不必复制任何东西，你只是将那个确切的元素显示为“全屏”。

$('.go-fullscreen').click(function() {
	var $parent = $(this).parent();
  if ($parent.hasClass('fullscreen')) {
  	$parent.removeClass('fullscreen');
  } else {
  	$parent.addClass('fullscreen');
  }
});

html, body {
  width: 100%;
  height: 100%;
}

div {
  height: 100px;
  overflow: auto;
}
.red { background-color: #F00; }
.green { background-color: #0F0; }
.blue { background-color: #00F; }
div.fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <button class="go-fullscreen">Fullscreen</button>
</div>
<div class="blue">
  <p>10</p>
  <p>20</p>
  <p>30</p>
  <p>40</p>
  <p>50</p>
  <p>60</p>
  <p>70</p>
  <p>80</p>
  <button class="go-fullscreen">Fullscreen</button>
</div>
<div class="green">
  <p>100</p>
  <p>200</p>
  <p>300</p>
  <p>400</p>
  <p>500</p>
  <p>600</p>
  <p>700</p>
  <p>800</p>
  <button class="go-fullscreen">Fullscreen</button>
</div>

Answer 2

你可以这样做，它会扩大到你可以配置的大小:) 有一个css部分和一个jquery部分。你可以为他们所有人做这件事。当然，将比例尺改为所需的尺寸。也许不是整页收购虽然会做类似的工作。希望你觉得它很有用。

CSS

.transition {
 -webkit-transform: scale(1.5); 
 -moz-transform: scale(1.5);
 -o-transform: scale(1.5);
 transform: scale(1.5);  
}

Jquery的

$(function(){
    $('.detailDiv1')
.on('mouseover', function() {
         $('.detailDiv1').addClass('transition')
    })
.on('mouseout', function() {
         $('.detailDiv1').removeClass('transition');

    });
});

正确的方法来复制html元素以缩放到全屏

2 个答案: