P
CUI v1.20.1177
Modals are versatile popup windows / dialogs that can be used for lightboxes, user notifications, and more.
<div class="pcui">
<pcui_reusable_modal ref="reusable-modal"
v-bind:btn-one-text="{{buttonOneText}}"
v-bind:btn-one-function="{{btnOneSampleFunction}}"
v-bind:btn-two-text="{{buttonTwoText}}"
v-bind:btn-two-function="{{btnTwoSampleFunction}}"
v-bind:btn-three-text="{{buttonThreeText}}"
v-bind:btn-three-function="{{btnThreeSampleFunction}}"
v-bind:header-text="{{headerText}}"
v-bind:body-content="{{bodyContent}}">
</pcui_reusable_modal>
</div>
var reusableModalDemo = new Vue({
el: '#reusable-modal-demo',
name: 'Reusable Modal Demo',
data: {
headerText: 'Customer details',
buttonOneText: '',
buttonTwoText: '',
buttonThreeText: '',
bodyContent: '<p>Provide your preferred name, as well as your company and job position, if applicable. If you update both your First and Last Name, or your Company, \n your account will be issued a new ID number.</p> \n\
<iframe width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> \n\
<p>Click <a href="/Home/Documentation">here </a> to go to Home page.</p> \
<img src="https://www.cameraegg.org/wp-content/uploads/2013/03/Canon-EOS-100D-Rebel-SL1-Sample-Image.jpg" alt="Toucan" height="300" width="560">'
},
mounted: function () {
$('#reusable-modal-demo .menu .item').tab();
},
components: {
pcui_reusable_modal: PCUIReusableModalComponent,
pcui_text_field: PCUIFixedLabelTextFieldComponent
},
methods: {
showModal: function () {
var self = this;
self.$refs['reusable-modal'].showModal();
},
btnOneSampleFunction: function () {
console.log('function from button 1');
},
btnTwoSampleFunction: function () {
console.log('function from button 2');
},
btnThreeSampleFunction: function () {
var self = this;
self.$refs['reusable-modal'].hideModal();
console.log('function from button 3, hides the modal');
}
}
});