Modal

Component name: <v-modal>

Examples

Basic










 
 
 
 
 
 
 
 
 
 
 
 





<div class="app">
  <v-data v-slot="state" :data="{ open: false }">
    <div class="row">
      <div class="col">
        <div class="text-center">
          <a href="javascript:;" class="text-primary" v-on:click="state.open = true">
            Click here to show modal
          </a>
        </div>
        <v-modal :open="state.open" v-on:close="state.open = false">
          <div class="row">
            <div class="col">
              <v-text font-size="7" tag="h1" bold>
                Lorem ipsum dolor sit amet, consectetur.
              </v-text>
              <v-text tag="div" class="mt-3">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
              </v-text>
            </div>
          </div>
        </v-modal>
      </div>
    </div>
  </v-data>
</div>
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

Multiple modals

<div class="app">
  <v-data v-slot="state" :data="{ activeModal: null }">
    <div>
      <div class="text-center">
        <a href="javascript:;" class="" v-on:click="state.activeModal = 'first'">
          Show <strong>FIRST</strong> modal
        </a>
      </div>
      <div class="text-center mt-3">
        <a href="javascript:;" class="" v-on:click="state.activeModal = 'second'">
          Show <strong>SECOND</strong> modal
        </a>
      </div>
      <v-modal :open="state.activeModal === 'first'" v-on:close="state.activeModal = null">
        <div class="row">
          <div class="col">
            <v-text font-size="7" tag="h1" bold>
              First modal
            </v-text>
            <v-text tag="div" class="mt-3">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </v-text>
          </div>
        </div>
      </v-modal>
      <v-modal :open="state.activeModal === 'second'" v-on:close="state.activeModal = null">
        <div class="row">
          <div class="col">
            <v-text font-size="7" tag="h1" bold>
              Second modal
            </v-text>
            <v-text tag="div" class="mt-3">
              Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit.
            </v-text>
          </div>
        </div>
      </v-modal>
    </div>
  </v-data>
</div>
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

API

Name Type Description Default
v-on:close Event Event triggered when user presses 'close' icon.
If omitted the close icon will not be displayed.
-
open Boolean Weather or not to show modal false