点击一些彩色瓷砖打开一个div

Question

我想制作一些彩色瓷砖，点击它们打开一个带有更多瓷砖的模态。这些瓷砖应该刷新模态并显示另一个瓷砖。

我想创建一个文件夹，其中包含更多文件夹和更多文件夹。

告诉我如何让它达到一个深度，我会休息。

现在我所做的就是：

html, body, .container
{
height: 100%; 
min-height: 100%;
}

.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}

.second{
float: left;
width: 20%;
height: 70%;
background-color: green;
}


.third{
float: right;
width: 80%;
height: 80%;
background-color: blue;
}

.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}

.last{
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}

<div class="container">
 <div class="first">first</div><div class="third">third</div>
 <div class="second">second</div><div class="fourth">fourth</div>
 <div class="last">last</div>
 </div>

Answer 1

可能最好使用像Bootstrap这样的东西（这也需要jQuery）：

https://jsfiddle.net/ryanpcmcquen/jpe70pLy/

＆＃13;

＆＃13;

html,
body,
.container {
  height: 100%;
  min-height: 100%;
}

.first {
  float: left;
  width: 20%;
  height: 30%;
  background-color: red;
}

.second {
  float: left;
  width: 20%;
  height: 70%;
  background-color: green;
}

.third {
  float: right;
  width: 80%;
  height: 80%;
  background-color: blue;
}

.fourth {
  float: right;
  width: 40%;
  height: 20%;
  background-color: #DDDDDD;
}

.last {
  float: right;
  width: 40%;
  height: 20%;
  background-color: yellow;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="first" data-toggle="modal" data-target="#myModal">
    first
  </div>
  <div class="third">third</div>
  <div class="second">second</div>
  <div class="fourth">fourth</div>
  <div class="last">last</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      Put a bunch of tiles here.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

那将为您处理JavaScript，然后您可以编写一些干净的模态标记。有关如何使用Bootstrap模式的更多详细信息：

https://getbootstrap.com/javascript/#live-demo