BootstrapVue — Modals

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to use modal components.

Prevent Closing

We can stop a modal from closing with the .preventDefault method.

For instance, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" @ok="handleOk">
      <div>Hello!</div>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleOk(bvModalEvt) {
      bvModalEvt.preventDefault();
    }
  }
};
</script>

We have the handleOk method which is set as the value of the ok event handler.

We called prevetnDefault on bvModalEvt , which is the event object for the modal.

Now when we click the OK button, the modal won’t close.

Modal Content

We can add content to a modal.

For instance, we can add tooltips and popovers:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" ok-only>
      <p>
        <b-button v-b-popover="'Popover'" title="Popover">Button</b-button>
      </p>
      <p>
        <a href="#" v-b-tooltip title="Tooltip">Link</a>
        .
      </p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have a modal with a button that has a popover.

We added it with the v-b-popover directive.

The v-b-tooltip lets us add a tooltip.

Styling

We can style models with various props.

We can change the modal size with the size prop.

For instance, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" size="xl" title="Extra Large Modal">Hello!</b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the size prop to change the size of the modal.

It’s responsive so it won’t overflow the screen.

Other values include 'lg' for large and 'sm' for small.

Scrolling Long Content

We can make long content scrollable.

For instance, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title=" Modal" scrollable>
      <p class="my-4" v-for="i in 20" :key="i">foo</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the scrollable prop on the modal to make it scrollable.

Vertically Centered Modal

We can vertically center our modal with the centered prop.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title=" Modal" centered>
      <p>hello</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now we see the modal is vertically centered.

Variants

There are various props to change the styling variant of various parts of the modal.

They are the following:

• header-bg-variant
• header-text-variant
• body-bg-variant
• body-text-variant
• footer-bg-variant
• footer-text-variant

The value can be danger , warning , info , success , dark , light , etc.

For instance, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title=" Modal" header-bg-variant="success" body-text-variant="info">
      <p>hello</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then the title will have a green background and the body text will be green.

Hide the Backdrop

The backdrop of the modal can be hidden.

We just have to add the hide-backdrop prop.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title="Modal" hide-backdrop>
      <p>hello</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We just add it and the background won’t be darkened.

Disable Animation

To disable the modal animation, we can add the no-fade prop to our modal.

For instance, we write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title=" Modal" no-fade>
      <p>hello</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

and we won’t get any animation when we open or close it.

Footer Button Sizing

We can change the footer button sizing with the button-size prop.

The possible values are sm for small or lg for large.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-modal.modal>Open</b-button>

    <b-modal id="modal" title=" Modal" button-size="sm">
      <p>hello</p>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have button-size set to 'sm' , so the buttons are extra small.

Conclusion

There are many customizations we can do with models. We can stop them from closing.