Question

我在点击<a href="" class="" id="">

时尝试将CSS应用于特定课程

我使用的模式在点击时应覆盖整个屏幕但由于某些原因点击时，除了标题（徽标/菜单）之外，所有内容都被覆盖。

当我点击模态时应用z-index并在单击x按钮时关闭模式时应用恢复z-index。

是否可以做到这一点？

是的，我试图找到一些我可以使用但根本没有运气的东西。

更新

EXAMPLE HERE

如果看到照片，您会看到x按钮位于MENU后面。

<a class="vPlay vPlay-btn clickformodal" href="#modal-our-work-1" data-toggle="modal" data-video="241737557"><img src="/wp-content/uploads/2018/04/play1.png" /></a>

单击此按钮时，模态将打开。

现在的想法是将z-index应用于标题，这样它就不会像照片中那样位于模态之上，但只有当点击此按钮时（或者更好地表示该id =＆＃34） ; clickformodal＆＃34;）

然后，当单击关闭按钮时，将另一个z-index样式应用于标题，以便在关闭模式时显示。

有意义吗？

另一次更新：

从用户建议尝试此代码但未运行

let open = document.selectElementByClassName("clickformodal");
let header = document.selectElementByClassName("mk-header");
let close = document.selectElementByClassName("close");


open.addEventListener('click', function () {
   header.classList.add("headerbefore");
});

close.addEventListener('click', function () {
   header.classList.remove("headerafter");
});

谢谢！：）

Answer 1

在html中为你的模态提供一个id，并用JS作为目标。

<button id="open-modal">Open Modal</button>
<div id="modal">
  /* Other elements */
</div>

Javascript看起来像这样：

const openModal = document.getElementById('open-modal');
const modal = document.getElementById('modal');
openModal.addEventListener('click', function () {
  modal.style.zIndex = '1000';
})

Answer 2

您好试试下面的代码，添加一些评论以帮助您弄清楚该怎么做。

<div class="modal" id="my-modal">
    hello
</div>

<button data-toggle="modal" data-target="my-modal">Toggle</button>

<style>
    .addIndex { z-index: 9999999; }
    .modal{position: absolute; top: -100%; left: 0; background: rgba(0,0,0,0.3);
    z-index: 9999; width: 100%; height: 100%; transition: all 0.5s ease-in-out; }
    .modal.show{top: 0;}
</style>

<script>
    var modal = document.querySelectorAll("*[data-toggle=modal]");

    [].forEach.call(modal, function(md){
        if (md.hasAttribute('data-target'))
        {
            var target = md.getAttribute("data-target");
            var loadtarget = document.getElementById(target);

            //open modal
            md.addEventListener("click", function(e){
                // add css addIndex class name to modal
                // it then become class="modal show addIndex"
                loadtarget.className += 'show addIndex';
                var closebtn = document.createElement("span");
                closebtn.className = "closebtn";
                closebtn.innerHTML = '&times;';
                loadtarget.appendChild(closebtn);

                // close modal
                closebtn.addEventListener("click", function(){
                    // revert to original css class name
                    // it become class="modal"
                    loadtarget.className = "modal";
                    loadtarget.removeChild(closebtn);
                });
            });
        }
    });
</script>

希望这会有所帮助;快乐的编码

Answer 3

最好使用Vue或类似的东西，但这就是我想到的只是使用vanilla JS。希望它有所帮助！

(function() {

  // makeshift router
  function changeView(num) {
    var views = document.querySelectorAll('div.view');
    for (var x = 0; x < views.length; x++) {
      views[x].style.display = 'none';
    }
    document.getElementById('view-' + num).style.display = 'block';
  }
  
  // event listeners for links
  var links = document.querySelectorAll('div.navbar-link');
  for (var x = 0; x < links.length; x++) {
    links[x].onclick = function() {
      changeView(parseInt(this.getAttribute('data-view')));
    }
  }

  // load init view
  changeView(1);

})();

div.view {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
  box-sizing: border-box;
  padding: 50px 15px;
  color: #FFF;
  display: none;
}

div#navbar {
  position: absolute;
  top: 0px;
  z-index: 1;
  width: 100%;
  background-color: yellow;
}

div#navbar div {
  display: inline-block;
  cursor: pointer;
  margin: 5px 15px;
}

div#navbar div:hover {
  opacity: 0.5;
}

div#view-1 {
  background-color: red;
}

div#view-2 {
  background-color: blue;
}

div#view-3 {
  background-color: green;
}

<div id="navbar">
  <div class="navbar-link" data-view="1">Homepage</div>
  <div class="navbar-link" data-view="2">Projects</div>
  <div class="navbar-link" data-view="3">Contact</div>
</div>
<div id="view-1" class="view">Homepage</div>
<div id="view-2" class="view">Projects</div>
<div id="view-3" class="view">Contact</div>

Answer 4

let open = document.getElementByClassName("class-name-of-open-button")[0];
let header = document.getElementByClassName("class-name-of-header")[0];
let close = document.getElementByClassName("class-name-of-x-button")[0];


open.addEventListener('click', function () {
  header.classList.add("newStyle");
})

close.addEventListener('click', function () {
  header.classList.remove("newStyle");
})

//in css file

newStyle {
  z-index: -9999;
}

如果使用id而不是类，则使用selectElementById而不是selectElementByClassName。您也可以使用querySelectorAll，它应涵盖任何一个。

如果这不起作用，请尝试发布应用于标头的css类/ ID。那里可能有一些时髦的东西。

单击按钮

4 个答案: