# Modal

If you want to display some content on demand in a very subtle way, a Now UI Modal is the perfect choice for this. We created custom modal components based on Bootstrap.

To use the modal, first import it: 
import {Modal} from 'src/components'
1

Global usage

Vue.component(Modal)
1

Local usage

export default {
 components: {
   Modal
 }
}
1
2
3
4
5

# Clasic modal

Classic, restyled modal

<template>
    <div>
      <n-button type="primary" @click.native="modals.classic = true">
        Classic modal
      </n-button>
      <modal :show.sync="modals.classic" headerClasses="justify-content-center">
        <h4 slot="header" class="title title-up">Modal title</h4>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
          the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large
          language ocean. A small river named Duden flows by their place and supplies it with the necessary
          regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your
          mouth.</p>
        <template slot="footer">
          <n-button>Nice Button</n-button>
          <n-button type="danger" @click.native="modals.classic = false">Close</n-button>
        </template>
      </modal>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          modals: {
            classic: false
          }
        }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Notice modal

<template>
    <div>
      <n-button type="info" @click.native="modals.notice = true">
        Notice modal
      </n-button>
      <modal :show.sync="modals.notice"
             footer-classes="justify-content-center"
             type="notice">
        <h5 slot="header" class="modal-title">How Do You Become an Affiliate?</h5>
        <template>
          <div class="instruction">
            <div class="row">
              <div class="col-md-8">
                <strong>1. Register</strong>
                <p class="description">The first step is to create an account at <a
                  href="https://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or
                  go for the classic version, whatever works best for you.</p>
              </div>
              <div class="col-md-4">
                <div class="picture">
                  <img src="/img/bg1.jpg" alt="Thumbnail Image" class="rounded img-raised">
                </div>
              </div>
            </div>
          </div>
          <div class="instruction">
            <div class="row">
              <div class="col-md-8">
                <strong>2. Apply</strong>
                <p class="description">The first step is to create an account at <a
                  href="https://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or
                  go for the classic version, whatever works best for you.</p>
              </div>
              <div class="col-md-4">
                <div class="picture">
                  <img src="/img/bg3.jpg" alt="Thumbnail Image" class="rounded img-raised">
                </div>
              </div>
            </div>
          </div>
          <p>If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're
            here to help!</p>
        </template>
        <div slot="footer" class="justify-content-center">
          <n-button type="info" round @click.native="modals.notice = false">Sounds good!</n-button>
        </div>
      </modal>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          modals: {
            notice: false
          }
        }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# Small modal

Best way to notify a user in a nice way.

<template>
    <div>
      <n-button @click.native="modals.mini = true">
        Small alert modal
      </n-button>
      <modal :show.sync="modals.mini"
             class="modal-primary"
             :show-close="false"
             header-classes="justify-content-center"
             type="mini">
        <div slot="header" class="modal-profile d-flex justify-content-center align-items-center">
          <i class="now-ui-icons users_circle-08"></i>
        </div>
        <p>Always have an access to your profile</p>
        <template slot="footer">
          <n-button type="neutral" link>Back</n-button>
          <n-button type="neutral" link @click.native="modals.mini = false">Close</n-button>
        </template>
      </modal>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          modals: {
            mini: false
          }
        }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

<template>
    <div>
      <n-button type="primary" @click="modals.large = true">
        Large modal
      </n-button>
       <n-button type="primary" @click="modals.small = true">
          Small modal
       </n-button>
       <modal :show.sync="modals.large"
              modal-classes="modal-lg"
              header-classes="justify-content-center">
               ....
       </modal>
       <modal :show.sync="modals.small"
             modal-classes="modal-sm"
             header-classes="justify-content-center">
        ....
       </modal>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          modals: {
            mini: false
          }
        }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Event Name Description Parameters
close Triggered when modal is closed -

# Slots

Name Description
default Default content for the modal
header Header content
close-button Content for the close button. As fallback, there is the close icon inside this slot
footer Modal footer content

← Navbars →