Preventing Bootstrap Modals from closing or refreshing on page reload

My code contains multiple buttons that trigger the function showModal(title).

showModal(title) {
    this.modalTitle = title
    this.$bvModal.show("add-modal")
}

Below is the specific modal being targeted.

<b-modal
   id="add-modal"
   ref="modal"
   v-bind:title="'Add Item to ' + modalTitle + ' list'"
   ...

I would like to have only one <b-modal> tag within the Vue component, but be able to open it with multiple buttons. Initially, each modal (with different titles) opens correctly on page load. However, after making changes to the code and reloading the browser, opening a new modal results in old modals appearing on top of the current one.

Is there a way to prevent multiple modals from overlapping and ensure that only one modal is opened after refreshing the browser?

Thank you

javascriptvue.jsbootstrap-4bootstrap-modal

Answer №1

If you find yourself needing to manage multiple modals on a single page, I highly recommend utilizing JavaScript to handle the functionality.

For example, if you are using Bootstrap 4 with jQuery:

<script type="text/javascript">
    $(document).ready(function () {
    //use buttons to trigger modal actions
        $("#button1").click(function(){
            $('#modal2').modal('hide');
        });

        $("#button2").click(function(){
            $('#modal1').modal('hide');
        });

       //if you want modal1 to be displayed on page load
       $("#modal1").modal('show');
    });
</script>

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

Accessing a jstl variable within javascript script

I need to access a JSTL variable within a JavaScript function. The JavaScript code submits a form. $("#userSubmit").on('submit', function () { document.getElementById("userForm").submit(); }); In the server-side code - request.setAttribu ...

javajavascriptjqueryjstl

What is the method for shifting the expansion panel icon position to the left?

I need the expansion arrow in my app to be on the left side of the panel. However, it currently appears on the right side by default. This is what I have tried: <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMore ...

javascriptreactjsmaterial-uiaccordion

I am looking to obtain assistance through denomongo for guidance

The deno-mongo guide page on GitHub is no longer functional. You can find the page here: 'https://github.com/manyuanrong/deno_mongo' I am struggling to understand how to use the plugin and get it up and running. Following the example in the "Re ...

javascriptmongodbpluginsdeno

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

javascripttypescriptooptypes

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

javascriptreactjsnext.jsusesound

Maintain the flow of passed slots into a slotted component using a functional enclosure

Playground I currently have the following set up: <script setup> import { ref } from 'vue' import Input from './Input.js' import Text from './Text.vue' const msg = ref('Hello World!') </script> <tem ...

vue.jsvuejs3vuejs3-composition-api

Accessing Element Content Without Identifiers in JavaScript

http://jsfiddle.net/n253R/3/ Make sure to check the link above. I'm looking to change the color of numbers based on their value. This needs to be applied to multiple numbers within different Wordpress posts. Currently, I am only able to affect one n ...

javascriptjquerygetelementbyidgetelementsbyclassname

Updating Vue-Devtools props in Chrome while executing asynchronous promise functions: A step-by-step guide

When working with Vue 3 and mutating a prop that is an object (I understand it's not recommended to mutate props directly, but in this case it works because it's passed by reference as an object), I noticed that the changes reflect in the Vue Dev ...

javascriptvue.jsvue-devtools

AngularJS - real-time validation using the $valid property

I have implemented AngularJS to handle form validation and submission. The submit button is configured as follows: <button type="submit" ng-disabled="btn" ng-click="submit(settings.$valid)" class="btn btn-primary"> Submit </button> The butt ...

javascriptangularjsformsvalidation

Looking to extract the full page source with Selenium and Node.js? Having trouble getting the complete source using driver.page_source as it

Having trouble fetching the full page source with Selenium web driver in Node.js I attempted using driver.page_source but it returns undefined in the console if(this.driver.findElement(By.id("ap_error_page_message")).isDisplayed()){ console.log(t ...

javascriptnode.jsselenium-webdrivernpmautomation

What is the best method for preserving HTML content using Ajax?

I am having difficulty storing HTML code in a database using AJAX. Despite having the correct connection information, I am unable to write to the table. <div id="others"> <div id="name"><input type="text" name="results" class="name"> ...

javascriptphpjqueryajax

When utilised within the same function, JSON values in JavaScript can yield varying results

Recently, I've been grappling with a JavaScript issue that involves fetching JSON values as data-attributes to populate a modal. This task sounds simple enough, but as a newcomer to this field, I find myself facing challenges. The main goal is to ite ...

javascriptjqueryjson

automatic site map creation tool within a vue js application

I am trying to generate a sitemap based on routes in my Vue.js project, but I have been unable to find a solution so far. I came across the vue-router-sitemap package on npm, but it doesn't provide any examples and has left me completely confused. Wha ...

vue.jssitemap

Adjust the input values based on the child elements within the main container

Here is a series of DIVs with unique IDs: <div id="2988"> <div class="site">YaHoot.com</div> <div class="logo">/images/yahootLogo.jpg</div> //[and so on] <input type="button" value="YaHoot" onclick="javascript: ...

javascriptjquery

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

When trying to use my custom CSS alongside Bootstrap, I'm running into some issues. The !important tag doesn't seem to have any effect (I've also heard that using !important is not recommended). Additionally, using IDs instead of classes isn ...

htmlcssbootstrap-4

What is the best way to utilize ng-if in the index.html page depending on the URL?

Is there a way to hide certain elements in the index page based on the URL of nested views? In my index.html file, I am looking to implement something like this: <top-bar ng-if="!home"></top-bar> <ui-view class="reveal-animation"> ...

javascriptangularjsuiviewng-hidejs-routes

Passing properties to the App component in React

Recently, I discovered how to pass props between components in React. Initially, I passed props from <FileTree> to <TextBox>, which you can see in action here: https://codesandbox.io/s/y018010qk9 After reorganizing my code, I structured my Rea ...

javascriptreactjs

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

What is the best way to merge two ajax functions into a single function?

I am looking to streamline my ajax functionality by combining two separate functions. One function is used to post a name, while the other is used to upload an image. I would like to create a single function that can handle both tasks of posting a name and ...

javascriptajax

How to style text in CSS with a numbered underline beneath

Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript? ...

javascripthtmlcssunderline