How to use Umbraco-UI uui-modal-sidebar

Questions
1

Hi there,

I am trying to use the uui-modal-sidebar but the examples on don’t seem to provide enough examples on how to do this.

I am using Umbraco 8 and creating a custom dashboard in the back office.

I would simply like to

  1. Have a button on a page. When the user clicks the button, a modal sidebar appears. ( I don’t want this modal to appear until the user clicks the button)
  2. The modal has a text input, and a submit and close button.
  3. When the user clicks the close button, the modal just closes and nothing else happens.
  4. When the user clicks the Submit button, the value in the text input gets submitted to some API.

Can anyone provide me with some sample code on how to achieve this.

Thanks in advance.

My code html code:

<uui-modal-container >
    <uui-modal-sidebar >
        <div  class="modal-side-bar">
          
            <textarea id="text-info" rows="4" maxlength="500" ng-model="submitReason" ></textarea>
           

            <uui-button-group>
                            <uui-button type="" style="" look="primary" label="Submit" href="/umbraco/backoffice/api/controllerapi/submitvalues?ID={{input-value}}"></uui-button>
                            <uui-button type="" style="" look="primary" label="Cancel"></uui-button>
            </uui-button-group>

    </uui-modal-sidebar>
</uui-modal-container>
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/112625-how-to-use-umbraco-ui-uui-modal-sidebar