What is the best way to access a child element from a parent element in HTML?

I am facing an issue with my HTML page where I have an element that opens a bootstrap modal and a button inside the modal launch div that displays an alert when clicked. The problem arises when the alert is displayed, and upon closing it, the modal also opens. I want to separate the functionality of opening the modal from the button so that I can click on the external link button independently. I think adjusting the z-index or moving the button forward from the div might solve this issue, but I am unsure how to do it.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<div type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
  <button onclick="alert('clicked!');">External click</button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
javascripthtmlcss

Answer №1

Here is a solution that might be helpful

$('#btn').click(function(e) {
  e.preventDefault();
  alert('clicked!');
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<div type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
  <button id="btn">External click</button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

Having trouble retrieving the DD-MM-YYYY date format in Vue.js from MySQL database

Hi, I am struggling with setting the format of dateCreated (the date when the account was created) to DD-MM-YYYY. In my Vue page, the code looks like this: https://i.sstatic.net/8SSAE.png The issue is that the website displays the date in the format sho ...

javascriptmysqlsqlvue.jsvue-component

"Looking to modify a style within an iframe with React? Here's how you can do it

I want to include an iframe in my react component, but I need to hide a specific element within it. The iframe source comes from an external domain. Is there a way to add custom CSS to the iframe so that I can achieve this? Below is the code for my compo ...

javascripthtmlcssreactjsiframe

Uploading data through AJAX without saving it in the database

Can someone please assist me? I am encountering an issue where I am uploading multiple data using an AJAX request. The data appears to upload successfully as I receive a response of 200 OK, but for some reason, the data is not being stored in the database. ...

javascriptjqueryajaxlaravel

Internet Explorer problem with menu hover

Website: I am encountering an issue with Internet Explorer (9 or lower) where, on hovering over any menu item on the homepage and attempting to select items beyond the first one - for example, hovering over "Shop" and then trying to click on "Brushes" or ...

javascriptcss

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

javascripthtmljquerycss

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

javascriptjqueryasp.netvalidationserver-side-validation

Schema Connections in Kendo Diagram

I am currently experimenting with the Telerik Kendo diagram in an attempt to create a visual representation. Due to the fact that I am retrieving all shapes and their connections from my database, I encountered an issue where the attributes of my data sour ...

javascriptangularjskendo-uitelerikdiagram

retrieve information in json format from a specified web address

I need to figure out why the data from a specific URL is not being displayed properly on my node application. It seems like there might be an error in my code. const extractRefDefaultSchema = async (data) => { const url = "https://mos.esante.gouv.f ...

javascriptnode.jsjsonexpresstry-catch

Ensuring the positioning of input fields and buttons are in perfect alignment

I've been struggling to align two buttons next to an input field, but every time I try, I end up messing everything up. I managed to align an input field with a single button, but adding a second button is proving to be quite difficult. Here is ...

htmlcssangularjs

Are there any factors within a local network or desktop environment that may impact the execution of JScript?

Something strange is happening with the JavaScript on my project. It works perfectly fine, except when accessed from computers at a specific company. Even more puzzling is that the JavaScript only fails about half of the time when accessed from that compan ...

javascriptajaxnetworkingdesktop

Angular Persistent States in Angular version 2 and beyond

Currently, I am in the process of transitioning an Angular 1.5.X application to Angular 4. Within my app, I incorporate Angular Ui-Router Sticky State from https://github.com/ui-router/sticky-states to prevent loss of content within my view when navigating ...

javascriptangularjsangularangular-ui-routerangular2-routing

The jQuery selector threw an Uncaught SyntaxError due to an Unexpected identifier

Just starting out with programming, I'm attempting to send data using my Python script. I'm unsure of what the error message is indicating. $(document).ready(function() { $("tags").keyup(function({ var search = $("tags").val() $.post(" ...

javascriptjqueryajax

Error: The value of 'PlacesService' property is not defined and cannot be read

I am working towards gathering a selection of locations that meet specific criteria by making a "routeRequest" and storing them. To achieve this, I aim to utilize Google Places to search for locations around the central point of my map. let map = new goog ...

javascriptgoogle-mapsvue.jsgoogle-places-api

The attempted creation of the ui.tree module failed with the error: [$injector:nomod] Unable to find module 'moduleName'! This could be due to a misspelling of the module name or

In my AngularJS project, I am utilizing a third-party library called angular-ui-tree to display data. To integrate this library, I need to include ui.tree as a dependency in my main app module. Following the instructions provided in the link, I have succes ...

javascriptangularjsjasmine

How to handle unclickable buttons in Selenium testing

from selenium import webdriver from time import sleep from selenium.webdriver.common.by import By chrome_options = webdriver.ChromeOptions() driver = webdriver.Chrome(r'chromedriver.exe', options=chrome_options) url = 'https://rarible.com/c ...

pythonhtmlseleniumselenium-webdriver

Tips for synchronizing JavaScript rendering time with Python requests?

My goal is to retrieve the HTML content of a JavaScript-generated website so that I can extract information using BeautifulSoup. However, when I attempt to request the HTML, the data I receive is from before the page fully loads. Below is the code snippet ...

pythonhtmlbeautifulsouprequest

Using Socket.emit in Ionic may not function as expected

Currently, I'm in the process of establishing a socket connection between my Ionic application and a socket server that I've constructed. The socket connection seems to encounter issues specifically when running the app on an iOS simulator u ...

javascriptangularjscordovasocketsionic-framework

Exporting a web page as a Microsoft Word document is not working properly because

Need assistance with exporting a webpage to Microsoft Word in table format, as the table layout is not displaying correctly and is missing CSS styling. Can someone please help me resolve this issue? ...

htmlcss

Enhancing Highcharts: Extending Tooltip Functionality

My dataset contains a collection of data points that I want to display in a Highcharts chart. Here is an example of how the data looks: mydataset = [{ x: 1, y: 3, names: ["John", "Jane"] }, { x: 2, y: 4, names: ["Alice", "Bob"] }] ...

javascriptjqueryhighcharts