When trying to open and close a modal using the normal Bootstrap 4 method, everything seemed to be working fine. But in my specific scenario, I needed a second button to close the modal, and simply duplicating the first button wasn't doing the trick.
I attempted to use the code below:
$('#sitenav_close').trigger('click.dismiss.bs.modal')
Unfortunately, this didn't work either. Are there any other approaches or methods that can be used to successfully close a modal with a second button?
If you're using Bootstrap 4.x, there's a way to manually close a modal by calling the .modal('hide') method.
<!-- my modal -->
<div class="modal" id="myModal">
...
<!-- my alternate close button -->
<button id="altCloseButton">Alternate close</button>
...
</div>
<script>
// when the alternate close button is clicked, close myModal
const altBtn = document.getElementById("altCloseButton");
altBtn.onclick = () => $('#myModal').modal('hide');
</script>
However, if you just want an additional close button, you can simplify it like this:
<!-- necessary Bootstrap assets -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbba1b9a1bf">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a6767fafd7ad74479795f8f6fbf59fa5ade53755">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary m-2" data-toggle="modal" data-target="#exampleModal">
Open demo modal
</button>
<!-- The Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><small>.modal-title</small></h5>
</div>
<div class="modal-body">
.modal-body
</div>
<div class="modal-footer">
<!-- three identical close buttons -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 1</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 2</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close 3</button>
</div>
</div>
</div>
</div>Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...
My slideshow smoothly transitions between images, with a logo positioned to partly overlay it. Everything looks great except for one pesky issue in IE6 - when the images change, the part of the logo that overlaps the slideshow also fades. I don't wan ...
I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...
I'm having trouble getting the text to align vertically in the middle and closer to the image. The vertical-align:middle property doesn't seem to be working for me. Additionally, when I resize the screen width, the layout changes from a horizonta ...
Upon execution, the program runs successfully but encounters an issue with the table output. The goal is to retrieve data from a database using a search function. https://i.sstatic.net/6WKlH.png Here is the outline: this represents //account-settings-se ...
I need to implement a timer in a div that will disable it for a specific duration, such as 3 seconds. Here is the HTML code snippet: <div class="answ-container" align="center"> <div class="c_answer" id="1316" name="1" data-rcat-no="1"> ...
I am facing a challenge with an XML File that contains a very large amount of content. Fortunately, I have an xsd file to accompany this xml document. For example: Take a look at this link If you want to view the XML Content: To access the XSD for that ...
Is there a way to incorporate animation into the drop-down feature of Bootstrap 4 on mobile layout without using jQuery? I've tried using the transition property with height set to 1s and 'all', but with no success. Any assistance would be ...
Due to Firefox's restriction on using an .mp4 file in the <video> tag, I am required to utilize the Flash fallback option on my VideoJS player. When it comes to Chrome, Safari, and IE, I can customize my VideoJS player via JavaScript to perform ...
I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...
I'm using JavaScript to create a div element and I'm adding the CSS property transition: .5s linear top; When the user clicks on the element (onmousedown event), it is supposed to smoothly move to the top of the screen and then be deleted using ...
Is there a way to extract the vertex from an object (specifically a box) in AFRAME, or calculate the intersection between a raycaster and an entity's face? Any assistance would be greatly appreciated. Thank you! EDIT: I have included the code snippet ...
HTML: <li>Facebook</li> <li>Twitter</li> <li>Souncloud</li> JS: var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com']; function openURL (url) { l ...
When entering a tracking number, please ensure it follows this specific format: AB-CDEFG-H. The first character (A) must be a digit between 1 and 9 inclusive. The second character (B) should be an uppercase English letter. This is followed by a hyphen (-). ...
Just wondering, which of the following code snippets is more efficient (or if neither, what would be the best way to approach this)? Background - I am working on creating a small image carousel and the code in question pertains to the controls (previous, ...
In PHP, I am currently developing a module that enables me to view and access all the users on my website. To achieve this, I am retrieving all the user names from the database and creating anchor links for them simultaneously. Now, I want to associate dat ...
This particular issue appears to be quite widespread, but existing Q&A resources are outdated and do not address my specific problem. Currently, with Django 2.0.2, my basic webpage is failing to render the bootstrap.css file simply because it cannot locat ...
One thing I have on my first page is this function: <script> function update() { $("#notice_div").html('Loading..'); $.ajax({ type: 'GET', dataType: 'json', data: latestid, url: '2includejso ...
I am currently building a web project using HTML and Bootstrap, however, I am facing an issue where my content is not showing up in the browser. Below is the code snippet that I am working with: let str = "" for (let item of r.articles) { s ...
After spending hours getting everything laid out and functioning perfectly, suddenly the menus started disappearing when trying to select an item from the drop down. No matter what I tried, like changing ul ul{display: block;}, the issue persisted. It used ...