我试图在我的投资组合中使用this。
我不明白为什么，但我只能打开一个模态窗口，所有其他的只是赢了工作。我把我迄今为止所做的事情here放进去，因为你可以看到我的投资组合中的公司项目有效，但所有其他项目都没有开放。
所以对于代码，这是我的modalEffects.js文件。第9行： close = modal.querySelector（＆＃39; .md-close＆＃39;）;） chrome debugguer告诉我有一个错误：Uncaught TypeError：无法调用方法＆＃39; querySelector＆＃39; null）我也不知道为什么以及如何纠正它。我不知道这两个问题是否可以联系起来！
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'mouseup', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
document.addEventListener( 'mousedown', function( ev ) {
if (classie.has(ev.target, "md-close")) {
ev.stopPropagation();
removeModalHandler();
}
});
} );
}
init();
})();
在我的索引html文件中，我有这个用于我的投资组合：
<!-- WORKS PAGE -->
<a id="portfolio"></a>
<div class="worksPage padding-top-bottom-60">
<div class="row">
<div class="columns twelve">
<h1>Portfolio</h1>
<div id="container" class="fourColPortfolio super-list variable-sizes clearfix">
<!-- portfolio Items -->
<div class="element small corner-stamp imprime logos design code">
<div id="folioList" class="folioList isotopeCornerStampList">
<ul id="filter" class="option-set clearfix" data-option-key="filter">
<li><a href="#show-all" data-option-value="*" class="selected">TOUT</a></li>
<li><a href="#features" data-option-value=".imprime">IMPRIMÉ</a></li>
<li><a href="#features" data-option-value=".logos">LOGOS</a></li>
<li><a href="#features" data-option-value=".design">WEB DESIGN</a></li>
<li><a href="#features" data-option-value=".code">INTÉGRATION / PROG. </a></li>
</ul>
</div>
</div>
<div class="element small logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-1"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-1.jpg" alt="Portfolio Image" />
</div>
<div class="element small branding">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-2"><span><i class="icon-plus-sign"></i></span></a>
</div>
<img src="images/portfolio-2.jpg" alt="Portfolio Image" />
</div>
<div class="element small logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-3"><span><i class="icon-plus-sign"></i></span></a>
</div>
<img src="images/portfolio-3.jpg" alt="Portfolio Image" />
</div>
<div class="element small design code logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-4"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-4.jpg" alt="Portfolio Image" />
</div>
<div class="element small logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-5"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-5.jpg" alt="Portfolio Image" />
</div>
<div class="element small logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-6"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-6.jpg" alt="Portfolio Image" />
</div>
<div class="element small imprime">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-7"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-7.jpg" alt="Portfolio Image" />
</div>
<div class="element small feature">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-8"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-8.jpg" alt="Portfolio Image" />
</div>
<div class="element small design logos">
<div class="dark-background"><a href="#!" class="md-trigger md-close" data-modal="detail-9"><span><i class="icon-plus-sign"></i></span></a></div>
<img src="images/portfolio-9.jpg" alt="Portfolio Image" />
</div>
<!-- /Portfolio Items -->
</div>
</div>
</div>
</div>
<!-- /WORKS PAGE -->
这位于页面底部，用于模态窗口的内容：
<div class="md-modal md-effect-7" id="detail-1">
<div class="md-content">
<div class="row">
<div class="columns twelve">
<h3>Détails du projet : Muse Par Simone</h3>
<div>
<ul>
<li><strong>Date de réalisation:</strong> Octobre 2013</li>
<li><strong>Mandat:</strong>
<ul>
<li>Création d’un logo pour une nouvelle ligne de bijoux haut de gamme au style punk-rock. La direction donnée par la cliente : Épuré, haute couture, chic, urbain, monochrome, le tout en accord avec le style des bijoux.</li>
<li>Réalisation d’une bannière et d’une icône pour page Facebook.</li>
<li>Rédaction d’un document qui analyse les différents profils de la cliente sur les réseaux sociaux afin de produire des recommendations sur leurs utilisations.</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="columns six">
<img src="images/detailMUSE1.jpg">
</div>
<div class="columns six">
<img src="images/detailMUSE2.jpg">
</div>
<div class="columns six">
<img src="images/detailMUSE3.jpg">
</div>
</div>
<button class="md-close">Fermer les détails du projet</button>
</div>
</div>
</div>
<div class="md-modal md-effect-7" id="detail-5">
<div class="md-content">
<div class="row">
<div class="columns twelve">
<h3>Détails du projet : Les Maisons Bouillon</h3>
<div>
<ul>
<li><strong>Date de réalisation:</strong> Février 2014</li>
<li><strong>Mandat:</strong>
<ul>
<li>Création d’un logo pour une nouvelle ligne de bijoux haut de gamme au style punk-rock. La direction donnée par la cliente : Épuré, haute couture, chic, urbain, monochrome, le tout en accord avec le style des bijoux.</li>
<li>Réalisation d’une bannière et d’une icône pour page Facebook.</li>
<li>Rédaction d’un document qui analyse les différents profils de la cliente sur les réseaux sociaux afin de produire des recommendations sur leurs utilisations.</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="columns six">
<img src="images/detailBOUILLON1.jpg">
</div>
<div class="columns six">
<img src="images/detailBOUILLON2.jpg">
</div>
<div class="columns six">
<img src="images/detailBOUILLON3.jpg">
</div>
</div>
<button class="md-close">Fermer les détails du projet</button>
</div>
</div>
</div>
<div class="md-overlay"></div>
有没有人看到我不喜欢的东西？我已经尝试过查看thewser哦tymphanus网站以及那两个问题，但它没有工作： Multiple "close" buttons on modal How to display a new modal window hiding the previous one?
谢谢！如果您需要更多信息，请告诉我！ ：）
答案 0 :(得分：2)
好吧，关于你提到的错误。您枚举.md-trigger元素，并使用其“data-modal”属性来获取DOM节点。问题是，在ForEach（）循环的第二次迭代中，你试图找到一个id为'modal-7'的元素，并且页面上没有，所以变量modal得到valor null。然后你对modal.querySelector（）的调用显然失败了。这就是为什么页面中只有一个模态。之后你的init（）函数就会停止执行。