Show dialog with full screen in Vue Dialog component

11 Jun 20247 minutes to read

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

Composition API (~/src/App.vue)

<template>
    <div>
        <div id="target" class="control-section; position:relative" style="height:360px;">
            <!-- Render Button to open the Dialog -->
            <ejs-button id='dlgbtn' v-on:click="btnClick">Open Dialog</ejs-button>
            <!-- Render Dialog -->
            <ejs-dialog ref="footerDialog" :header='header' :target='target' :width='width' :buttons='buttons'
                :visible='visible' :showCloseIcon='showCloseIcon' :content='content' :close="dlgClose">
            </ejs-dialog>
        </div>
    </div>
</template>
<script setup>
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { onMounted, ref } from 'vue';

const footerDialog = ref(null);
const target = "#target";
const width = '250px';
const header = 'Dialog';
const visible = false;
const showCloseIcon = true;
const content = 'This is a Dialog with fullscreen display.';

onMounted(() => {
    document.getElementById('dlgbtn').focus();
});

const btnClick = () => {
    footerDialog.value.show(true);
};
const dlgClose = () => {
    document.getElementById('dlgbtn').style.display = '';
};
const dlgButtonClick = () => {
    footerDialog.value.hide();
};
const buttons = [{ click: dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
{ click: dlgButtonClick, buttonModel: { content: 'Cancel' } }];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.control-section {
    height: 100%;
    max-height: 380px;
    overflow: hidden;
}
</style>

Options API (~/src/App.vue)

<template>
  <div>
    <div id="target" class="control-section; position:relative" style="height:360px;">
        <!-- Render Button to open the Dialog -->
        <ejs-button id='dlgbtn' v-on:click="btnClick">Open Dialog</ejs-button>
        <!-- Render Dialog -->
        <ejs-dialog ref="footerDialog" :header='header' :target='target' :width='width' :buttons='buttons' :visible='visible' :showCloseIcon='showCloseIcon' :content='content' :close="dlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-dialog":DialogComponent
},
    data: function() {
        return {
            target: "#target",
            width: '250px',
            header: 'Dialog',
            visible: false,
            showCloseIcon: true,
            content: 'This is a Dialog with fullscreen display.',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
            { click: this.dlgButtonClick, buttonModel: { content: 'Cancel' }}]
        }
    },
    mounted: function(){
        document.getElementById('dlgbtn').focus();
    },
    methods: {
        btnClick: function() {
            this.$refs.footerDialog.show(true);
        },
        dlgClose: function() {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgButtonClick: function() {
            this.$refs.footerDialog.hide();
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        max-height: 380px;
        overflow: hidden;
    }

</style>