将jQuery overlay功能指定给一个元素，而不是一次全部打开

时间：2015-05-24 09:29:26

标签： javascript jquery html css

我正在做一个关于为这个名为丹麦梗俱乐部的狗俱乐部创建一个新网站的学校项目。

我想制作一个关于所有猎犬的竞赛页面并通过创建六边形图片来构建它们并给它们每个覆盖图，所以当你点击它时其余部分会变暗，并且会弹出一个带有信息的框和更多信息关于你点击的比赛的图片。

让这一切工作，但我遇到这个问题，jQuery代码并不特定于你点击的那个。出于某种原因，它会同时打开所有叠加层，并且它们相互堆叠。

任何人都可以帮我找出我的代码中必须更改的内容吗？

PS。

大多数代码都可以在不同的开源上找到。

/* 
 * overlay.js v1.0.0
 * Copyright 2014 Joah Gerstenberg (www.joahg.com)
 */
(function($) { 
  $.fn.overlay = function() {
    overlay = $('.overlay');

    overlay.ready(function() {
      overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
        if (!overlay.hasClass('shown')) {
          overlay.css('visibility', 'hidden');
        }
      });

      overlay.on('show', function() {
        overlay.css('visibility', 'visible');
        overlay.addClass('shown');
        return true;
      });

      overlay.on('hide', function() {
        overlay.removeClass('shown');
        return true;
      });

      overlay.on('click', function(e) {
        if (e.target.className === overlay.attr('class')) {
          return overlay.trigger('hide');
        } else {
          return false;
        }
      })

      $('a[data-overlay-trigger]').on('click', function() {
        overlay.trigger('show');
      });
    })
  };
})(jQuery);
.outerbox {
	display:flex;
  	align-items:center;
  	justify-content:center;
}

#easyOverlay{
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  visibility: hidden;
  top: 0;
  color:#fff;
  z-index: 1000;
}

#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
}

#flexcolumn {
	display:flex;
	flex-direction:row;
}

.firstcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.secondcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.thirdcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.fourthcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.fifthcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.sixthcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
}

.seventhcolumn {
	flex-direction:column;
	margin-top:auto;
	margin-bottom:auto;
	text-align:center;
}


.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.85);
  cursor: pointer;

  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.overlay .modal {
  cursor: auto;
  position: absolute;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  max-width: 500px;
  max-height: 300px;
  padding: 20px;
  background-color: rgb(255,255,255);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.overlay.shown {
  opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>DTK Hexagon</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="dist/overlay.js"></script>
    <script>
      $(document).ready(function() {
        $('.overlay').overlay();
      });
    </script>
    <link rel="stylesheet" href="dist/overlay.css">
<link href="stylehexagon.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- 
	 
     flexcolumn ID = put every column in a row beside each other
     
	 the column divs = put every picture in a column     

-->


<div class="outerbox">	
    <div id="flexcolumn">
    
        <div class="firstcolumn">
            <div class="borderterrier">
                <a data-overlay-trigger href="#!"><img src="img/borderterrier.png"></a>
                	<div class="overlay">
                      <div class="modal">
                        <h1>Border terrier</h1>         
                        <p>Jeg ser ingen border :I</p>
                      </div>
                    </div>   
            </div>
            
            <div class="foxterrierglathaaret">
                <a data-overlay-trigger href="#!"><img src="img/sada.png"></a>
                	<div class="overlay">
                      <div class="modal">
                        <h1>Fox terrier glathåret</h1>         
                        <p>den er glat håret :I</p>
                      </div>
                    </div> 
            </div>
        </div>
        
    
        <div class="secondcolumn">
            <div class="airedaleterrier">
                <a data-overlay-trigger href="#!"><img src="img/airedaleterrier.png"></a>
                	<div class="overlay">
                      <div class="modal">
                        <h1>Airedale terrier</h1>         
                        <p>Airedale.. Dafuq :I</p>
                      </div>
                    </div> 
            </div>
            
            <div class="bullterrier">
                <a data-overlay-trigger href="#!"><img src="img/bullterrier.png"></a>
            </div>
            
            <div class="foxterrierruhaaret">
                <a data-overlay-trigger href="#!"><img src="img/fox_terrier_ruhaaret.png"></a>
            </div>
            
            <div class="kerryblueterrier">
                <a data-overlay-trigger href="#!"><img src="img/kerry_blue_terrier.png"></a>
            </div>
            
            <div class="norwichterrier">
                <a data-overlay-trigger href="#!"><img src="img/norwich_terrier.png"></a>
            </div>
        </div>
        
        <div class="thirdcolumn">
            <div class="americanstaffordshireterrier">
                <a data-overlay-trigger href="#!"><img src="img/muricanstaffordshireterrier.png"></a>
            </div>
            
            <div class="bull_terrier_miniature">
                <a data-overlay-trigger href="#!"><img src="img/bull_terrier_miniature.png"></a>
            </div>
            
            <div class="irishglenofimaal">
                <a data-overlay-trigger href="#!"><img src="img/irish_glen_of_imaal.png"></a>
            </div>
            
            <div class="lakelandterrier">
                <a data-overlay-trigger href="#!"><img src="img/lakeland_terrier.png"></a>
            </div>
            
            <div class="parsonrussellterrier">
                <a data-overlay-trigger href="#!"><img src="img/parson_russell_terrier.png"></a>
            </div>
            
            <div class="staffordshirebullterrier">
                <a data-overlay-trigger href="#!"><img src="img/staffordshire_bull_terrier.png"></a>
            </div>
        </div>
        
        <div class="fourthcolumn">
            <div class="australskterrier">
                <a data-overlay-trigger href="#!"><img src="img/australsk_terrier.png"></a>
            </div>
            
            <div class="cairn_terrier">
                <a data-overlay-trigger href="#!"><img src="img/cairn_terrier.png"></a>
            </div>
            
            <div class="irishsoftcoatedwheatenterrier">
                <a data-overlay-trigger href="#!"><img src="img/irish_soft_coated_wheaten_terrier.png"></a>
            </div>
            
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            
            <div class="sealyhamterrier">
                <a data-overlay-trigger href="#!"><img src="img/sealyham_terrier.png"></a>
            </div>
            
            <div class="terrierbrasileiro">
                <a data-overlay-trigger href="#!"><img src="img/terrier_brasileiro.png"></a>
            </div>
            
            <div class="westhighlandwhiteterrier">
                <a data-overlay-trigger href="#!"><img src="img/west_highland_white_terrier.png"></a>
            </div>
        </div>
        
        <div class="fifthcolumn">
            <div class="australiansilkyterrier">
                <a data-overlay-trigger href="#!"><img src="img/australian_silky_terrier.png"></a>
            </div>
            
            <div class="ceskyterrier">
                <a data-overlay-trigger href="#!"><img src="img/cesky_terrier.png"></a>
            </div>
            
            <div class="irskterrier">
                <a data-overlay-trigger href="#!"><img src="img/irsk_terrier.png"></a>
            </div>
            
            <div class="manchesterterrier">
                <a data-overlay-trigger href="#!"><img src="img/manchester_terrier.png"></a>
            </div>
            
            <div class="skotskterrier">
                <a data-overlay-trigger href="#!"><img src="img/skotsk_terrier.png"></a>
            </div>
            
            <div class="welshterrier">
                <a data-overlay-trigger href="#!"><img src="img/welsh_terrier.png"></a>
            </div>
        </div>
        
        <div class="sixthcolumn">
            <div class="bedlingtonterrier">
                <a data-overlay-trigger href="#!"><img src="img/bedlington_terrier.png"></a>
            </div>
            
            <div class="dandiedinmontterrier">
                <a data-overlay-trigger href="#!"><img src="img/dandie_dinmont_terrier.png"></a>
            </div>
            
            <div class="jackrussellterrier">
                <a data-overlay-trigger href="#!"><img src="img/jack_russell_terrier.png"></a>
            </div>
            
            <div class="norfolkterrier">
                <a data-overlay-trigger href="#!"><img src="img/norfolk_terrier.png"></a>
            </div>
            
            <div class="skyeterrier">
                <a data-overlay-trigger href="#!"><img src="img/skye_terrier.png"></a>
            </div>
        </div>
        
        <div class="seventhcolumn">
            <div class="engelsktoyterrier">
                <a data-overlay-trigger href="#!"><img src="img/engelsk_toy_terrier.png"></a>
            </div>
            
            <div class="japanskterrier">
                <a data-overlay-trigger href="#!"><img src="img/japansk_terrier.png"></a>
            </div>
        </div>
        
	</div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分：1)

当我构建overlay.js脚本时，我没有在一个页面上考虑多个叠加层。我现在已对其进行更新以解决此问题，您可以在此处获取新的更新脚本：https://github.com/JoahG/overlay.js/blob/gh-pages/dist/overlay.js

现在，您可以使用叠加层上的ID指定要让链接触发的叠加层。例如：

    <a data-overlay-trigger="airdale" href="#!"><img src="img/airedaleterrier.png"></a>
    <!-- added ="airdale" to specify the ID of the appropriate modal -->

    <div class="overlay" id="airdale"> <!-- add ID to modal -->
        <div class="modal">
            <h1>Airedale terrier</h1>         
            <p>Airedale.. Dafuq :I</p>
        </div>
    </div>

希望有所帮助！

相关问题
最新问题