When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

<su-modal v-if="showModal" @close="hideModalPopup()">
    <div slot="header">Modal header</div>
    <div slot="body">Content text goes here...</div>
    <div slot="footer" class="actions">Footer text is here...</div>

# Props

@close - Used to close popup when clicked outside of the modal

# Slots

header - Used for to update the title of the modal
body - Used for the main content section of the modal
footer - The slot which contains the action buttons. Use this to replace the buttons

# Usage

    <su-modal v-if="showModal" @close="hideModalPopup()">
        <h2 slot="header">Modal header</h2>
        <div slot="body">
            <span>Modal content goes here</span><br><br>
            <span>Modal content goes here</span>
        <div slot="footer" class="actions">
            <su-button class="button-blue" @click.native="continueAction">
            <su-button class="button-outline" @click.native="hideModalPopup">