Question

我正在使用w3school模态方法进行模态框：http://www.w3schools.com/howto/howto_css_modals.asp

一层效果很好。我正在尝试在其上添加一个图层，如下所示：

    <div id="modal" class="modal_class"><div class="modal_content"></div></div> 
    <div id="inner_modal" class="mc_innder"><div class="inner_modal_content"></div></div>

例如，假设我点击了显示第一个模态框的主按钮。

在模态框中，还有另一个按钮，可在其上再触发一层。

现在，有两层（第一层：z-index为1，第二层为2层，因此它们位于彼此之上）。

我遇到的问题是关闭功能：

window.onclick = function(event) {
 if (event.target == modal) {
    modal.style.display = "none";
 }
}

通过单击内容外部（黑色背景）关闭第二层后，单击事件将绑定到第二层，第一层关闭不起作用。

我尝试为两个id创建特定的点击功能：

jQuery(document).on('click', '#modal', function (e) {

和

jQuery(document).on('click', '#inner_modal', function (e) {

问题是，当我点击第二个按钮（位于#modal内）时，它会关闭第一层并打开第二层。

有人会帮我解决如何获得两层的问题吗？

谢谢！

Answer 1

我认为这就是你想要的：

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

我刚刚迈出第一步3“自己尝试”样本并对其进行了修改。我添加了任何一行，我发表了评论，因此很容易找到。

为了记录，w3schools教你一些非常糟糕的东西，我不建议你实际使用这个代码。对于初学者，你应该分开关注点（一个文件中的javascript，另一个文件中的css和另一个文件中的html）。此外，此代码不是很可扩展。对于您添加的每个模态，您必须添加一堆javascript。您应该编写可重用的函数。

总而言之，我建议找另一个网站来学习。

js模态框关闭函数

1 个答案: