Question

我正在尝试创建一个模态窗口，该窗口在网页上的整个应用程序中都会出现。

应用程序由一个接一个嵌套的深层div 组成。例如：面板＆gt;面板＆gt;面板细节＆gt;卡＆gt;卡含量

我希望为每张卡创建一个模态组件，但所有这些组件应该跨越整个应用程序。

要求

实际

以下是我的CSS：

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

模态的HTML结构是：

<div class="modal">
  <div class="modal-content">
    <p>Card 1 Modal</p>
  </div>
</div>

考虑嵌套div中包含class =“modal”的元素。

我如何编写我的CSS，因为卡1中的模态似乎跨越整个应用程序？

将模态组件放在嵌套div之外是不是一个好主意？

Answer 1

当你想要以模态显示某些东西时，这意味着它需要使用position: absolute，并且使用RGBA函数将阴影放在所有其他div上的效果，这是一种常见的rgb颜色加上不透明度

看一下这个例子：

＆＃13;

.container{
  display: flex;
  position: relative;
  justify-content: center;
  flex-direction: row;
  height: 300px;
  width: 100%;
}

.content1{
  display: flex;
  background-color: blue;
  flex: 1;
  height: 100%;
}

.content2{
  display: flex;
  background-color: red;
  flex: 1;
  height: 100%;
}

.content3{
  display: flex;
  background-color: green;
  flex: 1;
  height: 100%;
}

.modal {
	display: flex;
	position: absolute;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0, 0.5);
}

/* Modal Content */
.modal-content {
	align-self: center;
	background-color: red;
	margin: 50px;
	border: 1px solid #888;
	width: 80%;
	height: 100px;
}

#other {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: black;
   margin: 50px;
}

＆＃13;

<div>
<div class="container">
  <div class="content1">
  </div>
  <div class="content2">
  </div>
  <div class="content3">
  </div>
  <div class="modal">
	<div class="modal-content">
	  <p>Card 1 Modal</p>
	</div>
  </div>
</div>
<div id="other">
  something else
</div>
</div>

＆＃13;

Answer 2

如果position为fixed #container { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; } .card { margin-top: 30px; background-color: rebeccapurple; height: 300px; border: 1px solid black; width: 30%; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* background-color: rgb(0,0,0); */ } .modal-open { display: block; } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }，则不应该在嵌套div之外使用模态div：

＆＃13;

<div id="container">
  <div class="card">
    <div class="modal">
      <div class="modal-content">
        <p>Card 1 Modal</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="modal">
      <div class="modal-content">
        <p>Card 2 Modal</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="modal modal-open">
      <div class="modal-content">
        <p>Card 3 Modal</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

BUILD SUCCESSFUL

Total time: 8.329 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
ADB server didn't ACK
* failed to start daemon *
error: 
Starting the app (/home/hduser/Android/Sdk//platform-tools/adb shell am start -n com.legacitinative/.MainActivity...
error: no devices/emulators found

＆＃13;

Answer 3

试试这种风格。我将解决这个问题。

https://jsfiddle.net/12q1y6y7/1/

.modal {
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0, 0.5);
    position:inherit;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.third {
  width: 30%;
  height: 200px;
  float: left;
  border: 1px solid red;
  postition: relative;
}

多个div

3 个答案: