Concrete5 5.7: How to use the dialog popup on package dashboard single pages - concrete5

Question

I have a package with a dashboard single page. On this single page I need a dynamically created dialog popup, and so
I also need to use the router, views (package/mypackage/views) and controllers.
The questions now are the following:
What looks the directory structure like?
Where and how do I use Router::register('what_path_?', 'Namespace\?\Class::method') to create the route to the view/controller?
How do I call upon the route inside the single page view (Url::to(?)) and in combination with the dialog JS?
Please add comments if some questions are still open!

Answer 1

In concrete5, you can use $.fn.dialog.open, for example:
$.fn.dialog.open({
width: 500,
height: 300,
element: $('<div>This is an example!</div>')
});

Answer 2

To create modal dialogs on dashboard single pages in packages, the following steps are necessary (assuming the package already exists):
Creating the following supplementary files / folders (for sake of readability):
/my_package/controllers/dialog/my_dialog.php
/my_package/views/dialogs/my_dialog.php
The 'my_dialog' controller should look like this:
namespace Concrete\Package\MyPackage\Controller\Dialog;
use Concrete\Core\Controller\Controller;
class MyDialog extends Controller
{
protected $viewPath = 'dialogs/my_dialog';
public function view()
{
/** your code */
}
}
The 'my_dialog' view is a standard Concrete5 view.
Add (if not exists) the following method inside the package controller:
public function on_start()
{
Route::register('/my_package/my_dialog',
'\Concrete\Package\MyPackage\Controller\Dialog\MyDialog::view');
}
Now in the single page view:
<a class="btn btn-default btn-xs" data-button="my-dialog">My dialog</a>
<script type="text/javascript">
$('a[data-button=add-event]').on('click', function() {
$.fn.dialog.open({
href: '<?= URL::to('/my_package/my_dialog'); ?>',
title: 'My dialog',
width: '280',
height: '220',
modal: true
});
return false;
});
</script>
To note:
The route can be named however one wants it (ex.: /superuser/needs/new/pants).
The call on the dialog JS might be better handled, please comment on it.

Answer 3

To add another "inline-code" possibilty:
HTML:
<div id="my_dialog" style="display: none">
<div>
This is an example!
</div>
</div>
jQuery:
$('#my_dialog').dialog({
title: 'My Title',
width: 500,
height: 300,
modal: true,
buttons: [
{
text: 'Yes',
icons: {
primary: "ui-icon-confirm"
},
click: function () {
// Confirmed code
}
},
{
text: 'No',
icons: {
primary: "ui-icon-cancel"
},
click: function () {
$(this).dialog('close');
}
}
]
});