Aurelia Modal Dialog

Help Requests
1

Hi all,

I would like to know why in my view-model there is the metod “element.modal(‘hide’)”
so I can’t close my modal dialog manually.

With this question I have another. How can open a dialog and get a sort of validation when the user submit thant choose to close or not the dialog, in this case have the control of modal would be a good thing I think, neither href=“element” works because the dialog doesn’t disappear.

Any solution?
Thank you,
Andrea

2

For aurelia dialog plugin, if you inject dialog controller

import { DialogController } from 'aurelia-dialog';

and inject it in view model:


@inject(DialogController)
export class MyMessageDialog {
  constructor(controller: DialogController) {
    
  }

  closeDialog() {
    this.controller.close();
  }
}

If you want the dialog opener to close it, you can get a hold to the controller in open promise.

3

But I’m using a simple thing like this… Can I continue to use it?

Example:

    <div class="modal fade" id="modal-addArea">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="ooo" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Make a new Area</h4>
            </div>
            <div class="modal-body" style="margin:14px">
                <form action="/action_page.php">
                    <div class="form-group">
                        <label for="email">Nome area</label>
                        <input type="text" class="form-control" placeholder="Insert a name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" data-dismiss="modal" click.delegate="createArea()">Confirm</button>

            </div>
        </div>
    </div>
</div>
4

So you are using bootstrap modal. From this SO question https://stackoverflow.com/questions/16493280/close-bootstrap-modal

I guess you can do it like this:

<div class="modal fade" id="modal-addArea">
    <div class="modal-dialog">
      <!-- .... more content here -->
    </div>
</div>

export class MyEl {
  closeModal() {
    $('#modal-addArea').modal('toggle')
  }
}

You can also use aurelia 's ref feature, if you don’t wanna give it an ID (modal-addArea)

<div class="modal fade" ref="modalEl">
    <div class="modal-dialog">
      <!-- .... more content here -->
    </div>
</div>

export class MyEl {

  closeModal() {
    $(this.modalEl).modal('toggle');
  }
}
5

Thank you bigopon :smile:

I also found this solution around… but I don’t know why my viewmodel doesn’t find “modal” command so I had to try another solution
Also… I used “ref=modalEL” but I must initialize (You didn’t do) as a property the variable otherwise I get an error “not found” …

For the moment I got a solution:
Rerefing the close button of the modal dialog, than trigger the event click in the viewmodel.

image

6

Glad that it worked for you :smile: