<button class="ks-button" @click.prevent="$refs.modal1.open()">
Simple Modal
</button>
<ks-modal title="Simple Modal" ref="modal1">
<p>
This is a simple modal with just a title and content
</p>
</ks-modal><button class="ks-button" @click.prevent="$refs.modal2.open()">
Modal with buttons
</button>
<ks-modal title="Modal with buttons" ref="modal2" >
<p>
This is a simple modal with just a title and content
</p>
<div slot="footer">
<button class="ks-button">Yes</button>
<button class="ks-button" @click.prevent="$refs.modal2.close()">Cancel</button>
</div>
</ks-modal><button class="ks-button danger" @click.prevent="$refs.modal_danger.open()">
Danger Modal
</button>
<ks-modal title="Modal Danger" ref="modal_danger" :danger="true">
<p>
Be careful with this action!
</p>
<div slot="footer">
<button class="ks-button danger">Yes, Delete</button>
<button class="ks-button" @click.prevent="$refs.modal_danger.close()">Cancel</button>
</div>
</ks-modal>This is a simple modal without a title and only content
Click on the mask to close<button class="ks-button" @click.prevent="$refs.modal3.open()">
Modal without header
</button>
<ks-modal :show-header="false" ref="modal3">
<p>
This is a simple modal without a title and only content
</p>
<em>
Click on the mask to close
</em>
</ks-modal>Lorem ipsum dolor sit amet, quo virtute admodum persecuti in. Eu ullum vivendo est, praesent dignissim ut quo, sed inermis conclusionemque te. Has an epicuri appellantur. Vel eu argumentum persequeris. Ex sed quas atomorum, et consul epicuri vituperata vel. Mel ex dicit bonorum reprehendunt. Accumsan constituam te vim, ut malis soleat doming est.
Per in quis iisque perpetua, ut probo delectus his. Purto novum repudiandae id vix, eam ei dolores perpetua. In sea summo ridens iudicabit, tota dicunt vel in. Dolores conclusionemque no mei, ut duo dolorum consetetur, mel cu diam oporteat. Vel cu graeci audire. Idque menandri oportere ut per, id usu ipsum elitr, sed no eirmod necessitatibus.
His ex putant postulant, te epicurei theophrastus vim, probatus recusabo ius id. Mel integre impedit maiorum at, nam modus nullam et. Eam ne neglegentur suscipiantur, duo percipit oportere ei. Facete doctus comprehensam et his, phaedrum reprehendunt ex pro, ea has laoreet voluptaria. Erant officiis in qui, eam ei inani corrumpit. At quo recusabo consequuntur, vim te mazim quaeque, cu pri natum invidunt.
Purto veniam sed in, ut pro ridens appetere, nam in odio eleifend. Mel no ullum eruditi concludaturque, qui cotidieque comprehensam id, in per partem facilisi volutpat. Choro eruditi ea nam, discere tacimates ex vim. Pro populo lucilius erroribus in, te erat animal offendit vim. No his brute debitis definiebas. Cibo natum ex est.
Quot petentium cu mel, everti temporibus cu pri. Te eum summo theophrastus. Ancillae interpretaris an pri, elit omnis utroque eu sea, est porro aperiam hendrerit ne. Virtute blandit at pri, est dissentias dissentiunt no. Vel cu malis dissentiet, at ius inimicus conceptam referrentur.
Lorem ipsum dolor sit amet, quo virtute admodum persecuti in. Eu ullum vivendo est, praesent dignissim ut quo, sed inermis conclusionemque te. Has an epicuri appellantur. Vel eu argumentum persequeris. Ex sed quas atomorum, et consul epicuri vituperata vel. Mel ex dicit bonorum reprehendunt. Accumsan constituam te vim, ut malis soleat doming est.
Per in quis iisque perpetua, ut probo delectus his. Purto novum repudiandae id vix, eam ei dolores perpetua. In sea summo ridens iudicabit, tota dicunt vel in. Dolores conclusionemque no mei, ut duo dolorum consetetur, mel cu diam oporteat. Vel cu graeci audire. Idque menandri oportere ut per, id usu ipsum elitr, sed no eirmod necessitatibus.
His ex putant postulant, te epicurei theophrastus vim, probatus recusabo ius id. Mel integre impedit maiorum at, nam modus nullam et. Eam ne neglegentur suscipiantur, duo percipit oportere ei. Facete doctus comprehensam et his, phaedrum reprehendunt ex pro, ea has laoreet voluptaria. Erant officiis in qui, eam ei inani corrumpit. At quo recusabo consequuntur, vim te mazim quaeque, cu pri natum invidunt.
Purto veniam sed in, ut pro ridens appetere, nam in odio eleifend. Mel no ullum eruditi concludaturque, qui cotidieque comprehensam id, in per partem facilisi volutpat. Choro eruditi ea nam, discere tacimates ex vim. Pro populo lucilius erroribus in, te erat animal offendit vim. No his brute debitis definiebas. Cibo natum ex est.
Quot petentium cu mel, everti temporibus cu pri. Te eum summo theophrastus. Ancillae interpretaris an pri, elit omnis utroque eu sea, est porro aperiam hendrerit ne. Virtute blandit at pri, est dissentias dissentiunt no. Vel cu malis dissentiet, at ius inimicus conceptam referrentur.
<button class="ks-button" @click.prevent="$refs.modal4.open()">
Modal with a lot of content
</button>
<ks-modal title="Modal with buttons" ref="modal4">
<div>
<p>
Lorem ipsum dolor sit amet, quo virtute admodum persecuti in.
Eu ullum vivendo est, praesent dignissim ut quo, sed inermis conclusionemque te.
Has an epicuri appellantur. Vel eu argumentum persequeris.
Ex sed quas atomorum, et consul epicuri vituperata vel. Mel ex dicit bonorum reprehendunt.
Accumsan constituam te vim, ut malis soleat doming est.
</p>
...
</div>
<div slot="footer">
<button class="ks-button">Yes</button>
<button class="ks-button" @click.prevent="$refs.modal4.close()">Cancel</button>
</div>
</ks-modal>This is a simple modal with a select.
Adding more text to push the modal down
to test behaviour at the bottom of the modal.
<button class="ks-button" @click.prevent="$refs.modal5.open()">
Modal with Select
</button>
<ks-modal title="Modal with buttons" ref="modal5" >
<p>
This is a simple modal with a select
</p>
<ks-select
name="code"
:items="countries"
label-key="name"
v-model="country_code"
list-height="150px"
>
<template v-slot="{item}">{{item.name}}</template>
</ks-select>
<div slot="footer">
<button class="ks-button error">Yes</button>
<button class="ks-button" @click.prevent="$refs.modal5.close()">Cancel</button>
</div>
</ks-modal>| Name | Type | Default | Description |
|---|---|---|---|
| title | String | Notification | The title of the Modal. Displayed in the title bar. |
| showHeader | Boolean | true | Weather to show the header/titlebar |
| showClose | Boolean | true | Whether to show the close(x) button in the header/titlebar |
| maxWidth | String | 75% | The maximum width that should be allowed for the modal |
| minWidth | String | NULL | The minimum width that should be allowed for the modal |
| maxHeight | String | NULL | The maximum height that should be allowed for the modal |
| minHeight | String | NULL | The minimum height that should be allowed for the modal |
| closeOnEscape | Boolean | true | Whether to close the modal when the user presses the 'escape' key |
| danger | Boolean | false | Whether to add the danger styling to the modal |
| loading | Boolean | false | Whether to show a loading bar in the modal |
| closeOnMaskClick | Boolean | true | Whether to close the modal when a user clicks on the mask |
| forceScroll | Boolean | false | Whether to force the modal in a scrollable state. This is the same when a modal is higher than the window. This option helps with modals jumping when content is dynamic. |