I am creating a modal using HTML,CSS and js by watching this video https://www.youtube.com/watch?v=27JtRAI3QO8&list=WL&index=12 The problem is when I click on "view more"(Trigger that opens a modal) the modal doesn't open tutor has created a function which accepts "modalclick" parameter but he didn't place this parameter in html. below is my Html
const mviews = document.querySelector('.s_modal'),
mbtns = document.querySelector('.s_button'),
mcloses = document.querySelector('s_modal-close');
let modal = function(modalclick) {
mviews[modalclick].classList.add('act-modal');
}
mbtns.forEach((mbtn, i) => {
mbtn.addEventListener('click', () => {
modal(i);
});
});
mcloses.forEach((mclose) => {
mclose.addEventListener('click', () => {
mviews.forEach((mview) => {
mview.classList.remove('act-modal');
});
});
});.act-modal {
opacity: 1;
visibility: visible;
}<section class="services section" id="services">
<h2 class="section_title">Projects</h2>
<span class="section_subtitle">Done With instutions</span>
<div class="s_container container grid">
<!--==================== SERVICES 1 ====================-->
<div class="s_content">
<div>
<i class="uil uil-object-ungroup s_icon"></i>
<h3 class="s_title">Object <br> detection</h3>
</div>
<span class="button button--flex button--small button--link s_button ">
View More
<i class="uil uil-arrow-circle-right button__icon"></i>
</span>
<div class="s_modal">
<div class="s_modal-c">
<h4 class="s_modal-t">Object <br> detection</h4>
<i class="uil uil-times s_modal-close"></i>
<ul class="s_modal-ss grid">
<li class="s_modal-s">
<i class="uil uil-check-circle s_modal-i"></i>
<p> Implemented an object detector which identifies the classes of the objects in an image</p>
</li>
<li class="s_modal-s">
<a href="https://github.com/">
<i class="uil uil-github-alt s_modal-i"></i>
<p>access the project(Github)</p>
</a>
</li>
<li class="s_modal-s">
<a href="https://youtu.OS5s">
<i class="uil uil-presentation-play s_modal-i"></i>
<p>Presentation of project(Youtube)</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==================== SERVICES 2 ====================-->
<div class="s_content">
<div>
<i class="uil uil-palette s_icon"></i>
<h3 class="s_title">Real time <br>color identification</h3>
</div>
<span class="button button--flex button--small button--link s_button">
View More
<i class="uil uil-arrow-circle-right button__icon"></i>
</span>
<div class="s_modal">
<div class="s_modal-c">
<h4 class="s_modal-t">Real time <br>color identification</h4>
<i class="uil uil-times s_modal-close"></i>
<ul class="s_modal-ss grid">
<li class="s_modal-s">
<i class="uil uil-check-circle s_modal-i"></i>
<p> Implemented an image color detector which identifies colors in an realtime video.</p>
</li>
<li class="s_modal-s">
<a href="https://github.com/Git-ysc/Computer_vision.git">
<i class="uil uil-github-alt s_modal-i"></i>
<p>access the project(Github)</p>
</a>
</li>
<li class="s_modal-s">
<a href="https://youtu.be/zufhUPOfNE4">
<i class="uil uil-presentation-play s_modal-i"></i>
<p>Presentation of project(Youtube)</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==================== SERVICES 3 ====================-->
<div class="s_content">
<div>
<i class="uil uil-bill s_icon"></i>
<h3 class="s_title">Payment Gateway<br>Integration</h3>
</div>
<span class="button button--flex button--small button--link s_button">
View More
<i class="uil uil-arrow-circle-right button__icon"></i>
</span>
<div class="s_modal">
<div class="s_modal-c">
<h4 class="s_modal-t">Payment Gateway<br>Integration</h4>
<i class="uil uil-times s_modal-close"></i>
<ul class="s_modal-ss grid">
<li class="s_modal-s">
<i class="uil uil-check-circle s_modal-i"></i>
<p> Created a simple website where payment gateway is integrated.</p>
</li>
<li class="s_modal-s">
<a href="https://github.com/Git-ysc/WEB_DEVELOPMENT.git">
<i class="uil uil-github-alt s_modal-i"></i>
<p>access the project(Github)</p>
</a>
</li>
<li class="s_modal-s">
<a href="https://youtu.be/lsQ9iSLcDo8">
<i class="uil uil-presentation-play s_modal-i"></i>
<p>Presentation of project(Youtube)</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==================== SERVICES 4 ====================-->
<div class="s_content">
<div>
<i class="uil uil-transaction s_icon"></i>
<h3 class="s_title">Basic banking <br>system</h3>
</div>
<span class="button button--flex button--small button--link s_button">
View More
<i class="uil uil-arrow-circle-right button__icon"></i>
</span>
<div class="s_modal">
<div class="s_modal-c">
<h4 class="s_modal-t">Basic banking <br>system</h4>
<i class="uil uil-times s_modal-close"></i>
<ul class="s_modal-ss grid">
<li class="s_modal-s">
<i class="uil uil-check-circle s_modal-i"></i>
<p> Creates a simple website which has a Transfers table that records all transcation.with a dummy customer database</p>
</li>
<li class="s_modal-s">
<a href="https://github.com/Git-ysc/WEB_DEVELOPMENT.git">
<i class="uil uil-github-alt s_modal-i"></i>
<p>access the project(Github)</p>
</a>
</li>
<li class="s_modal-s">
<a href="https://youtu.be/thdD__gFnOQ">
<i class="uil uil-presentation-play s_modal-i"></i>
<p>Presentation of project(Youtube)</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>in this file there is modalclick parameter
let modal = function(modalclick){
mviews[modalclick].classList.add('act-modal');
}
where should i use modalclick parameter in html
