# Aurelia Modal Dialog

**URL:** <https://discourse.aurelia.io/t/aurelia-modal-dialog/1896>\
**Category:** Help Requests\
**Created:** [November 15, 2018, 8:31am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896 "2018-11-15T08:31:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [November 15, 2018, 8:31am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/1 "2018-11-15T08:31:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 9:05am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/2 "2018-11-15T09:05:19Z")

</div>

For aurelia dialog plugin, if you inject dialog controller

```auto
import { DialogController } from 'aurelia-dialog';

```

and inject it in view model:

```auto

@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.

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [November 15, 2018, 10:10am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/3 "2018-11-15T10:10:34Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 10:27am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/4 "2018-11-15T10:27:51Z")

</div>

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

I guess you can do it like this:

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

```

```auto
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`)

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

```

```auto
export class MyEl {

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

```

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [November 15, 2018, 10:36am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/5 "2018-11-15T10:36:02Z")

</div>

Thank you bigopon 😄

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/845069b6211b502af3f32d2f031b5d4ffa461bc8.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2018, 11:03am UTC](https://discourse.aurelia.io/t/aurelia-modal-dialog/1896/6 "2018-11-15T11:03:11Z")

</div>

Glad that it worked for you 😄