jquery - 全屏覆盖定位问题

标签 jquery html css twitter-bootstrap

我想要在单击按钮时覆盖全屏 div。它在初始时工作正常，但是当我们更改选项卡并再次单击按钮时，它会被限制在具有相对定位的 div 中，并且不会全屏显示。好吧，我试图在单击按钮时取消设置该 div 的位置。但它不起作用。我可能做错了什么。任何帮助将不胜感激。

$('.seemore').click(function(){
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
    
})
$('.closebtn').click(function(){
  $(this).parent().removeClass('opened');
})
function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab +
          '"]'
      );
      var temp_content_js = document.querySelector(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab_js +
          '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}

$(function() {
  vertical_tabs();
});
.tabs{
display:table;
}
.ux-vertical-tabs {
  position: relative;
  
}

.ux-vertical-tabs .tabs {
     -webkit-transform: translateY(0px); 
     transform: translateY(0px); 
}

.ux-vertical-tabs .tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 1.2rem;
  /*width: 100%;*/
  outline: none;
  text-align: left;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 3px #ccc;
  /*font-size: .85rem;*/
  color: #666;
  text-transform: uppercase;
  transition: background 250ms ease;
  float: left;
}

.ux-vertical-tabs .tabs button:first-child {
  border-top: 1px solid #ddd;
}

.ux-vertical-tabs .tabs button:hover {
  background: #edf0d0;
}

.ux-vertical-tabs .tabs button.active {
  background: #00a651;
  border-right: 0;
  color: #fff;
}

.ux-vertical-tabs .tabs button span {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc;
  transform: translateX(1rem);
  opacity: 0;
  transition: all 350ms ease;
  display: inline-block;
}



.ux-vertical-tabs .maincontent {
  flex: 1;
  box-shadow: 0 0 3px #ccc;
  padding: 2rem;
  overflow: hidden;
}

.ux-vertical-tabs .maincontent .tabcontent {
  display: none;
}

.ux-vertical-tabs .maincontent .tabcontent.active {
  display: flex;
  flex: 1;
  position: relative;
}

button.seemore {
    background: #5cb85c;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 9px 30px;
    font-size: 12px;
}




.teamy{
  position: relative;
}

.teamy__layout{
  position: relative;
  overflow: hidden;
}

.teamy__avatar{
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.teamy__back{
  display: none;
}

.teamy:hover .teamy__back{
  width: 100%;
  height: 100%;  
  display: flex;

  position: absolute;
  top: 0;
  left: 0;    
  z-index: 3;
}
.teamy__back-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.opened{
  height: 100%;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
<!DOCTYPE html>
<html>

<head>
    <title>Packages</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>

<body>

    <section class="team">
        <div class="container">
            <div class="row">
                <div class="container maxwidth">
                    <div class="ux-vertical-tabs">
                        <div class="tabs">
                            <button data-tab="tab1" class="active">AA<span></span></button>
                            <button data-tab="tab2">BB<span></span></button>
                            <button data-tab="tab3">CC<span></span></button>

                        </div>
                    
                    <div class="maincontent">
                            <div data-tab="tab1" class="tabcontent active">

                                <div class="teamy-team scroller">
                                    <div class="scroller__box">
                                        <div class="scroller__item">
                                            <div class="teamy teamy_mask-circle teamy_zoom-slide-photo">
                                                <div class="teamy__layout">
                                                    <div class="teamy__preview">
                                                        <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1140421945%2F960x0.jpg%3Ffit%3Dscale" class="teamy__avatar" alt="The demo photo">
                                                    </div>
                                                    <div class="teamy__back">
                                                        <div class="teamy__back-inner">

                                                            <button class="seemore">Read More</button>

                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="teamy__content">
                                                    <span class="teamy__name">Dr abc</span>
                                                    <span class="teamy__post">abc</span>
                                                </div>
                                            </div>

                                        </div>
                                        <div id="myNav" class="overlay">
                                            <a href="javascript:void(0)" class="closebtn">&times;</a>
                                            <div class="overlay-content">
                                                <a href="#">About</a>
                                                <a href="#">Services</a>
                                                <a href="#">Clients</a>
                                                <a href="#">Contact</a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            </div>

    </section>

</body>

</html>

最佳答案

似乎选项卡在导致问题的动画之后具有样式 transform: translateX(0%)。我不知道为什么转换规则会搞砸，但您可以在单击按钮时删除此 css 样式以获得解决方法。

$('.seemore').click(function() {
  $(this).parents('.tabcontent.active').css('transform','none'); // add this line
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
})


$('.seemore').click(function() {
  $(this).parents('.tabcontent.active').css('transform','none'); // add this line
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
})
$('.closebtn').click(function() {
  $(this).parent().removeClass('opened');
})

function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
        temp_tab +
        '"]'
      );
      var temp_content_js = document.querySelector(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
        temp_tab_js +
        '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}

$(function() {
  vertical_tabs();
});
.tabs {
  display: table;
}

.ux-vertical-tabs {
  position: relative;
}

.ux-vertical-tabs .tabs {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.ux-vertical-tabs .tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 1.2rem;
  /*width: 100%;*/
  outline: none;
  text-align: left;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 3px #ccc;
  /*font-size: .85rem;*/
  color: #666;
  text-transform: uppercase;
  transition: background 250ms ease;
  float: left;
}

.ux-vertical-tabs .tabs button:first-child {
  border-top: 1px solid #ddd;
}

.ux-vertical-tabs .tabs button:hover {
  background: #edf0d0;
}

.ux-vertical-tabs .tabs button.active {
  background: #00a651;
  border-right: 0;
  color: #fff;
}

.ux-vertical-tabs .tabs button span {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc;
  transform: translateX(1rem);
  opacity: 0;
  transition: all 350ms ease;
  display: inline-block;
}

.ux-vertical-tabs .maincontent {
  flex: 1;
  box-shadow: 0 0 3px #ccc;
  padding: 2rem;
  overflow: hidden;
}

.ux-vertical-tabs .maincontent .tabcontent {
  display: none;
}

.ux-vertical-tabs .maincontent .tabcontent.active {
  display: flex;
  flex: 1;
  position: relative;
}

button.seemore {
  background: #5cb85c;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 9px 30px;
  font-size: 12px;
}

.teamy {
  position: relative;
}

.teamy__layout {
  position: relative;
  overflow: hidden;
}

.teamy__avatar {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.teamy__back {
  display: none;
}

.teamy:hover .teamy__back {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.teamy__back-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.opened {
  height: 100%;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Packages</title>

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>

<body>

  <section class="team">
    <div class="container">
      <div class="row">
        <div class="container maxwidth">
          <div class="ux-vertical-tabs">
            <div class="tabs">
              <button data-tab="tab1" class="active">AA<span></span></button>
              <button data-tab="tab2">BB<span></span></button>
              <button data-tab="tab3">CC<span></span></button>

            </div>

            <div class="maincontent">
              <div data-tab="tab1" class="tabcontent active">

                <div class="teamy-team scroller">
                  <div class="scroller__box">
                    <div class="scroller__item">
                      <div class="teamy teamy_mask-circle teamy_zoom-slide-photo">
                        <div class="teamy__layout">
                          <div class="teamy__preview">
                            <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1140421945%2F960x0.jpg%3Ffit%3Dscale" class="teamy__avatar" alt="The demo photo">
                          </div>
                          <div class="teamy__back">
                            <div class="teamy__back-inner">

                              <button class="seemore">Read More</button>

                            </div>

                          </div>
                        </div>

                        <div class="teamy__content">
                          <span class="teamy__name">Dr abc</span>
                          <span class="teamy__post">abc</span>
                        </div>
                      </div>

                    </div>
                    <div id="myNav" class="overlay">
                      <a href="javascript:void(0)" class="closebtn">&times;</a>
                      <div class="overlay-content">
                        <a href="#">About</a>
                        <a href="#">Services</a>
                        <a href="#">Clients</a>
                        <a href="#">Contact</a>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

  </section>

</body>

</html>

关于jquery - 全屏覆盖定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57767542/

上一篇：html - 如何在网格中设置一行的自定义高度？

下一篇：html - 两个 div 彼此相邻，堆叠响应变化

相关文章：

PHP 提交按钮不起作用。

css - 向左更改滚动条位置，弄乱了我的数据表

javascript - jquery获取输入变化时的值

jquery - 如何使用jquery从div内的许多选择框中获取值

javascript - 在用户使用单选按钮回答一系列问题后，使用 jQuery 显示用户分数

jquery - CSS 宽度不适用于 <ul> <li> <label> 等

css - Opera 浏览器以不同方式显示边距

php - 将 Assets 文件添加到 Laravel 现有元素

jquery - jvectormap 工具提示的 Z-Index 定位

javascript - 显示一个元素 5 秒，然后隐藏并显示下一个元素

©2024 IT工具网  联系我们