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

How can we bring in a function into a Vue component?

I'm currently facing an issue with importing a single function into my Vue component. To tackle this problem, I separated the function into its own js file: randomId.js: exports.randomId = () => //My function ... Within my Vue component, I attem ...

javascriptwebpackvue.jsecmascript-6

Modifying state within useEffect while also including the redux value as a dependency array

I am facing an issue with my Redux array and the dependency array in my useEffect. The problem arises when I store the value of the Redux array in a variable using useSelector, which is then used as a dependency in my useEffect. The logic inside the useE ...

javascriptreactjsreact-nativereact-hooksreact-redux

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

My current implementation utilizes v-if to conditionally display a list of cafes. However, I am interested in filtering the list based on whether a specific drink item is found in an array. For instance, I have a collection of cafes and I only want to dis ...

javascriptvue.jsvuejs2

Working with conditional class binding in Vue.js based on width

I am new to using Vue.js and I have a question regarding how to utilize conditions with the v-bind directive. Here is the code where I encountered an error: <input type="text" class="form-control" v-bind:class="{'is-i ...

vue.js

Discovering the keycode for the GO button in JavascriptDiscovering the keycode

Can anyone help me figure out how to find the keycode for the GO button using Javascript in an Android browser? ...

javascriptandroiddom-events

A guide to displaying numerous notifications using notistack in a React environment

I'm currently experimenting with React's 'notistack' module to showcase multiple notifications as a stack. However, it seems like I might be making an error since every time I encounter a warning: react_devtools_backend.js:3973 Warning ...

javascriptreactjsmaterial-uinotistack

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

javascriptjqueryhtmlcss

Retrieving status code without reliance on a back-end language (maybe through JavaScript?)

My new service offers a solution for error pages in web apps by providing a code snippet that can be easily copied and pasted into the error page templates, similar to Google Analytics. The status code is embedded in a hidden input within the installatio ...

javascriptstatushttp-status-codes

Efficient method for deleting a specific item from a JSON object in React.js

Within the REACT JS framework, I am managing a JSON object in the state component "myrecords". The items within this object are organized by their respective Company Names and have the following structure: { "Master Automotives": [ { ...

javascriptjsonreactjsstate

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...

javascripthtmlcssonloadpreloader

The website doesn't give my codes enough time to execute fully

I have a series of commands that I need to execute: Retrieve cookie from the browser using the JS Cookie plugin in mypage.php Validate its value with Ajax and my PHP scripts in myapi.php Set certain SESSION variables in myapi.php Utilize the values store ...

javascriptphpajaxcookies

How to Retrieve the Access Token from Instagram using Angular 2/4/5 API

I have integrated Instagram authentication into my Angular 2 project using the following steps: Begin by registering an Instagram Client and adding a sandbox user (as a prerequisite) Within signup.html, include the following code snippet: <button t ...

javascriptangularinstagram-api

TinyMCE - The control with the name 'content' is considered invalid and cannot receive focus

I am utilizing TinyMCE 4 and here is the code snippet for it: <script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script> <script> tinymce.init({ selector: 'textarea[name=content]', ...

javascripttinymcetinymce-4

Vue.js error: Reaching maximum call stack size due to failed data passing from parent to child component

I'm having trouble passing data from a parent component to a child component. I tried using props and returning data, but with no success. The parent component is a panel component that contains the data, while the child component is a panelBody. Thi ...

javascriptvue.js

injecting a variable from the configuration service into a TypeScript decorator

I am interested in setting up a scheduled task for my NestJs application to run at regular intervals. I found information on how to use intervals in the NestJs documentation. Since my application uses configuration files, I want to keep the interval value ...

javascriptnode.jstypescriptnestjs

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

Axios is passing an array instead of a JSON object when making a POST request

I am trying to make a post request using axios in my Vue.js front-end to communicate with Laravel on the backend. const data = { file: {id} } axios.post('api/documents/remove', data).then((response) => { ...

javascriptphplaravelvue.js

Custom input field in Material UI not communicating properly with Redux form

I am currently utilizing Material UI and React to implement a custom input field. While using redux form for form validation, I have encountered an issue where the onBlur and onFocus events are not being dispatched successfully. Interestingly, if I switch ...

javascriptreactjsmaterial-uiredux-form

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

Is there a way to prevent my jQuery from triggering the <a href> unless the ajax post is successful?

I am attempting to update the database and redirect the user's browser to a new page with just one click. Here is how the HTML appears: <a id='updateLiveProgress' style='width:118px;' href='~link~'>Click here</ ...

javascriptjqueryajax