Choosing the ID and class name through jQuery among numerous classes

I am looking to create a Modal Pop Up Box using CSS and JS, but I need help getting the id (mymodal , mybtn) and the Class (close) from the span Element in JavaScript. Please refer to the attached link for an explanation of the code.

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>

Answer №1

Is this the answer you were hoping to find?

How to use jQuery to select a class or ID

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

Note: I am selecting the mybtn ID, which is unique in the current HTML file. I am also selecting the close class within the mymodal ID to ensure no other close class is affected (if any exist). Here, I am opening and closing a modal.

The following code is using 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';
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The grid area may not properly adjust based on the width size of the browser

When adjusting the width of your browser, you may notice occasional white space in the bottom right corner. https://i.stack.imgur.com/UFV6R.png https://i.stack.imgur.com/VfhMN.png Is there a way to remove this extra margin? In other words, how can I ens ...

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

Managing a large amount of data returned from JSON can be complex. To tackle this, I am utilizing jQuery dataTable for sorting, filtering, and pagination purposes. The functionality is working seamlessly for sorting, searching, and paginating the data. H ...

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

React Native: Struggling with Button Styling

I am relatively new to React Native, although I have experience with React in my professional work. I'm finding that applying styles to components in React Native is a bit different than what I'm used to. Specifically, I am struggling to apply s ...

What is the best way to send a group of objects to a server?

When working on my jsp page, I encountered a situation where I needed to include a JavaScript function that utilizes an Iterator. During each iteration of the process, it was necessary to store data in an object. Once all iterations were complete, the li ...

Working with AngularJS to Create Repeated Divs and Buttons

Currently, I'm looking to utilize ng-repeat to iterate over a div that contains a button. At the moment, I am achieving this by generating the div and button in the JavaScript section and then adding the final outcome to an array: var newDiv = docum ...

Interactive JavaScript Slider for Customizing Selection

Recently, I came across a range slider and I am trying to make it more dynamic. The current JavaScript code has hardcoded references to specific HTML elements, and I want to have multiple sliders on my HTML page, each functioning independently. The code sn ...

I find myself having to double-click the Jquery submit button

Can anyone help with an issue I'm having where I need to click a div button twice for the link to work properly? Thank you <div class="toolbar"> <table width="100%"> <tr> <td class="toolbar-button" title="Print Data" id ...

JavaScript regular expressions: filtering out results from the output

I'm trying to extract a specific number from a dynamically added string. The text looks like this: nisi non text600 elit, where 600 is the number I need to retrieve. Is there a way to achieve this without replacing the word text? var str = ('nis ...

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

React component fails to re-render after state change

For the past two days, I've been struggling with this error and can't seem to fix it! I'm currently working on creating a weather app in React which utilizes the API. The app features a Bootstrap Navbar with a search option that allows user ...

The offspring surpasses the parent's limits and extends beyond its

I am designing a webpage layout that includes 2 navigation bars (top), a top-graphic (middle) flexbox, and a content flexbox (bottom). Within the top-graphic flexbox, I want to add a black box for text. However, I am facing issues with the box overflowing ...

Creating dynamic animations with Keyframes in CSS

Query If we consider the illustration below: A-------------B------------C How can I begin an animation from the middle point (B), then have it move to A, return to B, and finally reach C? I attempted to create an example, but it is not functioning corre ...

Button Menu in HTML

When you click the menu button, I want the text inside the class="greetings" div to change from "Welcome Jon deo" to just "G" So basically, whenever the menu button is clicked, display the letter G and hide or replace "Welcome Jon deo" Addition ...

Sending a JSON object as a prop from one React.js component to another

I've been attempting to pass a JSON object retrieved by calling a REST API after submitting a form with user input. While I am successful in transferring the data to another component within the same file (this component is responsible for iterating o ...

Testing for the presence of a child element within a parent component in React

Below is the structure of my component: const Parent = (props) => { return <div>{props.children}</div>; }; const Child1 = (props) => { return <h2>child 1</h2>; }; const Child2 = (props) => { return <h2>child 2 ...

Whenever I press the BACK button, my localStorage gets wiped out, a phenomenon that occurs across all

I have integrated localStorage to store some non-essential data that enhances user experience without affecting the application's functionality. Issue: Whenever I navigate from the show page back to the INDEX page using the BACK button, all my local ...

Obtaining the checked element's value within a for loop

I'm currently trying to retrieve and send each value of the checked elements to PHP. However, I am only able to obtain the first value of one checked item. Here is the code snippet: $("#conf").click(function(){ var count = $("input:checked").len ...

The code is functioning properly, however it is returning the following error: Anticipated either

Can you explain why this code is resulting in an unused expression error? <input style={{margin:'25px 50px 0',textAlign:'center'}} type='text' placeholder='add ToDo' onKeyPress={e =>{(e.key ==='En ...