文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery模态触发器按钮位置

问Jquery模态触发器按钮位置
EN

Stack Overflow用户

提问于 2020-02-08 01:03:41

回答 1查看 40关注 0票数 0

我希望为我的每个部分触发不同的粘滞按钮/模态。我想在点击点击，一个模式弹出与所有的文章细节出现。

到目前为止，一切运行正常。我的问题是，当第一个模态打开所有文章的详细信息时，我可以看到第二个模态的按钮。我尝试组织一些z-index的规范，但不能使用我的div的粘滞类。

我想知道我必须修改我的Javascript代码，使文章可见，而不显示任何模态按钮。

有什么想法我应该修复我的小提琴让它正常工作吗？这是我的小提琴：https://jsfiddle.net/CAT999/48rd76mp/5/

下面是我的代码片段

<!DOCTYPE html>
<html lang="en-US">
<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
    <meta name="description" content="CAT is a designer and art director" />







<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--SECTION-1-->     
<!-- img-container -->   
<!-- img-container -->     
<!-- img-container -->   
<!-- img-container -->  
<div class="img-container" id="uno">
<img src="https://media.endclothing.com/end-features/prodfeatures/5ee628543c59bce18d2dd4614c7aa1b5ca8bca0f_end.-hiroshi-fujiwara-moncler-genius-interview12.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">      
<!--MODAL-1-->  
<button class='btn-1 modal-btn'>Open Modal 1</button><div class="overlay" id="YourModalBox">
  <span onclick="document.getElementById('YourModalBox').style.display='none'" class="close-button topright">&times;</span><div class="modal"><span>
  Title Description-1  <br>
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-1-->  
</div></div></div>
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->







<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--SECTION-2-->     
<!-- img-container -->   
<!-- img-container -->     
<!-- img-container -->   
<!-- img-container -->  
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">      
<!--MODAL-2-->  
<button class='btn-2 modal-btn'>Open Modal 2</button><div class="overlay" id="YourModalBox2">
  <span onclick="document.getElementById('YourModalBox2').style.display='none'" class="close-button topright">&times;</span><div class="modal"><span>
  Title Description-1  <br>
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-2-->  
</div></div></div>
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->  











<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- img-container -->   
<!-- img-container -->     
<!-- img-container -->   
<!-- img-container -->   
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face">
<div class="sticky"><div class="sticky-button">
<!--MODAL-3-->  
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
<div class="overlay" id="YourModalBox3">
<span onclick="document.getElementById('YourModalBox3').style.display='none'" class="close-button topright">&times;</span>
  <div class="modal"><span>Title Description-3  <br>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-3-->  
</div></div></div>
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->  











<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->

.close-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: red;
  text-align: center;
  cursor: pointer;
  white-space: nowrap
}

.topright {
  position: fixed!important;
  right: 20px;
  top: 20px;
}


*{ z-index: 999999;
  margin:0;
  padding:0;
}



body, html{
font-size: 16px;
}


/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container { 
   display: flex;
   height: 100vh;
    justify-content: center;
  align-items: center;
  padding:20px;  
   background-color: white;
   justify-content: center;  
   z-index:0;

}
@media only screen and (max-width:800px){
.img-container  {
       padding:20px;  
       height: 80vh;   
}
}

@media only screen and (max-width:450px){
.img-container  {
     padding:20px; 
      height: 82vh;   
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}


img {
   position:absolute;
  border-radius: 20px;
   height:100%;
   z-index:0;
}

@media only screen and (max-width:800px){
        img {
        width:95%;
           height:80%;
        object-fit: cover;
}
}

@media only screen and (max-width:450px){
    img {
        width:95%;
        height:100%;
        object-fit: cover;
}
}





.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 20px;  
  right:20px;
  justify-content: space-between;
  align-self: flex-end;
  margin-left: auto;
}


.sticky-button {  
  background: none;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
    box-shadow:0 0px 7px rgba(0,0,0,0.4);
  /*padding: 6px 10px;*/
  color:white;
  font-family:helvetica;
  font-weight:600;
  font-size: 1rem;
  border-radius: 24px;
  width: auto;
}


@media only screen and (max-width:800px){
.sticky-button {
     width: auto;
    font-size: 0.8rem;

   }
}
@media only screen and (max-width:450px){
.sticky-button {
    width: auto;
    font-size: 0.8rem;

   }
}


.sticky-button-description {
   color: hsla(0,0%,100%,.75);
    font-size: 12px;
    line-height: 1.4em;
    letter-spacing: normal;
    font-size: 12px;
    line-height: 1.4em;
    font-weight:400;

   font-family:helvetica;
   display:inline;
    letter-spacing: normal;
  }
@media only screen and (max-width:450px){
.sticky-button-description{

   }
}
.sticky-button-break {
   padding:0.3rem;
  }
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/







.break{height:200px;
   width:100%;
   background:black;
  margin:0;
  padding:0;}

.break-2{height:900px;
   width:100%;
   background:red;
  margin:0;
  padding:0;}













.btn-1 {
    border: none;
    border-radius: 24px;
    color: white;
    background-color:#3E3E3E;
    padding: 10px 18px;
    font-size: 16px;
  width: 100%;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
    transition: transform .3s ease;
     z-index:100;
}

.btn-1:active {
    transform: scale(10.9);
   opacity:0;
    z-index:20;
    transition: transform .3s ease;
    z-index:100;

}


.btn-2 {
    border: none;
    border-radius: 24px;
    color: white;
    background-color:#3E3E3E;
    padding: 10px 18px;
    font-size: 16px;
  width: 100%;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
    transition: transform .3s ease;
   z-index:50;

}

.btn-2:active {
  position:sticky;
    transform: scale(10.9);
  z-index:50;

}

.btn-3 {
    border: none;
    border-radius: 24px;
    color: white;
    background-color:#3E3E3E;
    padding: 10px 18px;
    font-size: 16px;
  width: 100%;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
    transition: transform .3s ease;
    z-index:30;

}

.btn-3:active {
    transform: scale(10.9);
   z-index:30;

}


/* Modal */
.overlay {
   position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;/*rgba(0, 0, 0, .55);*/
  pointer-events: none;
}


.overlay, .modal {
  opacity: 0;
  transition: .5s;
}

.overlay--open {
  opacity: 1;

  pointer-events: auto;
}

.overlay--open .modal {
  opacity: 1;

  transform: none;
}

.modal {
  position: fixed;

  width: 100%;
  margin: 15vh auto 0;
  background: black;
  color:#fff;
  transform: translateY(80%) scale(.8);
  transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
  transition-delay: .4s;
  text-align: center;
    font-size: 26px;
  font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/

const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {

  btn.onclick = function() {
     overlay = this.nextElementSibling
       overlay.classList.add('overlay--open');
  }
})


function closeModal() {
    overlay.classList.remove('overlay--open');
}

function onDocumentKeyUp(e) {
    if (e.keyCode === 27) {
        closeModal();
    }
}

function onDocumentClick(e) {
    if (e.target === overlay) {
        closeModal();

    }
}

document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);

html

css

javascript

jquery

回答 1

Stack Overflow用户

发布于 2020-02-08 04:15:28

您可以尝试我的更改：

将情态动词移出.sticky element
使.modal-btn的onclick向上移动DOM父项，并在D18的CSS中找到.modal-btn的onclick上的疯狂z-index H212H113修复D14以单击.close-button单击事件H223H124添加了D26中的D25的全局清除。单击时添加了D25的全局清除。

当单击D26时，H124添加了D25的全局清除

JSFiddle地址：https://jsfiddle.net/o0aq92r7/2/

const modalBtns = document.querySelectorAll('.modal-btn');
const closeBtns = document.querySelectorAll('.close-button');

let overlay;
modalBtns.forEach(btn => {
  btn.onclick = function() {
     overlay = this.parentElement.parentElement.nextElementSibling
 	 overlay.classList.add('overlay--open');
  }
});
closeBtns.forEach(cBtn => {
    cBtn.onclick = function() {
        const overlayElements = document.querySelectorAll('.overlay');
        overlayElements.forEach(overlay => {
            overlay.classList.remove('overlay--open');
        });
    }
});

function onDocumentKeyUp(e) {
	if (e.keyCode === 27) {
		closeModal();
	}
}

function onDocumentClick(e) {
	if (e.target === overlay) {
		closeModal();
	}
}

document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);

.close-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: red;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
  }
  
  .topright {
    position: fixed!important;
    right: 20px;
    top: 20px;
  }
  
  
  * {
    z-index: 1;
    margin:0;
    padding:0;
  }
  
  
  
  body, html{
  font-size: 16px;
  }
  
  
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  .img-container { 
     display: flex;
     height: 100vh;
      justify-content: center;
    align-items: center;
    padding:20px;  
     background-color: white;
     justify-content: center;  
     z-index:0;
  
  }
  @media only screen and (max-width:800px){
  .img-container  {
         padding:20px;  
         height: 80vh;   
  }
  }
  
  @media only screen and (max-width:450px){
  .img-container  {
       padding:20px; 
        height: 82vh;   
  }
  }
  #uno{background:purple;}
  #due{background: yellow;}
  #tre{background:black;}
  
  
  img {
     position:absolute;
    border-radius: 20px;
     height:100%;
     z-index:0;
  }
  
  @media only screen and (max-width:800px){
          img {
          width:95%;
             height:80%;
          object-fit: cover;
  }
  }
  
  @media only screen and (max-width:450px){
      img {
          width:95%;
          height:100%;
          object-fit: cover;
  }
  }
  
  
  
  
  
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: 20px;  
    right:20px;
    justify-content: space-between;
    align-self: flex-end;
    margin-left: auto;
  }
  
  
  .sticky-button {  
    background: none;
    -webkit-font-smoothing: antialiased;
    -webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
      box-shadow:0 0px 7px rgba(0,0,0,0.4);
    /*padding: 6px 10px;*/
    color:white;
    font-family:helvetica;
    font-weight:600;
    font-size: 1rem;
    border-radius: 24px;
    width: auto;
  }
  
  
  @media only screen and (max-width:800px){
  .sticky-button {
       width: auto;
      font-size: 0.8rem;
    
     }
  }
  @media only screen and (max-width:450px){
  .sticky-button {
      width: auto;
      font-size: 0.8rem;
    
     }
  }
  
  
  .sticky-button-description {
     color: hsla(0,0%,100%,.75);
      font-size: 12px;
      line-height: 1.4em;
      letter-spacing: normal;
      font-size: 12px;
      line-height: 1.4em;
      font-weight:400;
  
     font-family:helvetica;
     display:inline;
      letter-spacing: normal;
    }
  @media only screen and (max-width:450px){
  .sticky-button-description{
      
     }
  }
  .sticky-button-break {
     padding:0.3rem;
    }
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  /*container-video*/
  
  
  
  
  
  
  
  .break{height:200px;
     width:100%;
     background:black;
    margin:0;
    padding:0;}
  
  .break-2{height:900px;
     width:100%;
     background:red;
    margin:0;
    padding:0;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  .btn-1 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
       z-index:2;
  }
  
  .btn-1:active {
      transform: scale(10.9);
     opacity:0;
      z-index:20;
        transition: transform .3s ease;
      z-index:100;
   
  }
  
  
  .btn-2 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
     z-index:50;
  
  }
  
  .btn-2:active {
    position:sticky;
      transform: scale(10.9);
    z-index:50;
     
  }
  
  .btn-3 {
      border: none;
      border-radius: 24px;
      color: white;
      background-color:#3E3E3E;
      padding: 10px 18px;
      font-size: 16px;
    width: 100%;
      cursor: pointer;
      outline: none;
      overflow: hidden;
      box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
      transition: transform .3s ease;
      z-index:30;
   
  }
  
  .btn-3:active {
      transform: scale(10.9);
     z-index:30;
  
  }
  
  
  /* Modal */
  .overlay {
     position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;/*rgba(0, 0, 0, .55);*/
    pointer-events: none;
    z-index: 5;
  }
  
  
  .overlay, .modal {
    opacity: 0;
    transition: .5s;
  }
  
  .overlay--open {
    opacity: 1;
   
    pointer-events: auto;
  }
  
  .overlay--open .modal {
    opacity: 1;
  
    transform: none;
  }
  
  .modal {
    position: fixed;
  
    width: 100%;
    margin: 15vh auto 0;
    background: black;
    color:#fff;
    transform: translateY(80%) scale(.8);
    transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
    transition-delay: .4s;
    text-align: center;
      font-size: 26px;
    font-weight:400;
  }
  /*MODAL TRIGGER*/
  /*MODAL TRIGGER*/

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
    <meta name="description" content="CAT is a designer and art director" />
</head>
<body>
    <div class="img-container" id="uno">
        <img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg"
            alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-1 modal-btn'>Open Modal</button>
            </div>
        </div>
        <!--MODAL-1-->
        <div class="overlay" id="YourModalBox">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>
                    Title Description-1  <br>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                    ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-1-->
    </div>

    <div class="img-container" id="due">
        <img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-2 modal-btn'>Karl info</button>
            </div>
        </div>
        <!--MODAL-2-->
        <div class="overlay" id="YourModalBox2">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>
                    Title Description-1  <br>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                    aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                    ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-2-->
    </div>

    <div class="img-container" id="tre">
        <img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg"
            alt="Smiley face">
        <div class="sticky">
            <div class="sticky-button">
                <button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
            </div>
        </div>
        <!--MODAL-3-->
        <div class="overlay" id="YourModalBox3">
            <span class="close-button topright">&times;</span>
            <div class="modal"><span>Title Description-3  <br>"Sed ut perspiciatis unde omnis iste natus
                    error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
                    ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                    magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo.
                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div>
        </div>
        <!--MODAL-3-->
    </div>


    <!-- REMOVE!! -->
    <div class="break-2"></div>
    <!-- REMOVE!! -->
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60117988

复制

相似问题

问Jquery模态触发器按钮位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery模态触发器按钮位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery模态触发器按钮位置
EN