Выберите идентификатор и имя класса, набрав jquery в нескольких классах

Question

Как получить идентификатор (mymodal, mybtn) и получить класс (закрыть) в элементе span в JavaScript. Я хочу создать модальное всплывающее окно в CSS и JS. пожалуйста, найдите ссылку, которая объясняет код

div class="header" id="hd">
        <div class="overlay">
            <ul class="bxslider">
                <li>
                    <h2>welcome to <span>plus resturent</span></h2>
                    <h3>the best tasting experience</h3>
                    <p>Olive is a Resturant,coffee roastery located on Jordan. 
                     we have awesome recips and the most talented chefs in town!</p>
                    <button class="btn" id="mybtn">creat account</button>
                    <div id="mymodal" class="modal">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="close" id="spn">&times;</span>
                                <h2>modal header</h2>
                            </div>
                            <div class="modal-body">
                                <p>kkcmsakfm.sdf</p>
                            </div>
                            <div class="modal-footer">
                                <h3>dgdsg</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h2>we sereve quality food</h2>
                    <h3></h3>
                </li>
                <li>
                    <h2>welcome to <span>plus resturent</span></h2>
                    <h3>welcome to slider three</h3>
                </li>
            </ul>
        </div>
    </div>

Answer 1

Надеюсь, это именно то, что вы ищете

как выбрать класс или идентификатор, используя jquery

$(document).ready(function() {
  $('#mybtn').click(function() {
   $('#mymodal').show(); 
  })
  $('#mymodal .close').click(() => {
    $('#mymodal').hide();
  })
})

примечание: iam выбирает mybtn id который является уникальным в текущем файле html, я также выбираю закрытый класс с идентификатором mymodal, чтобы никакой другой закрытый класс не вызывался (если он существует). здесь я открываю модальный и закрываю его

ниже код с javascript

const mymodal = document.getElementById('mymodal');
const close = document.querySelector('#mymodal .close');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', () => {
  mymodal.style.display = 'inline';
})

close.addEventListener('click', () => {
  mymodal.style.display = 'none';
})