Open modal dialog

I've been trying to edit items in a table through a modal dialog. What I'd like to achieve is that every row in a table has an "edit", and that clicking this button will open a new modal dialog where you can edit the row. Then you should have the option to cancel or save the operation.

I know how to do this using either plain JavaScript or jQuery UI, but I can't figure out what the correct way to achieve this is in concrete5. I haven't been able to find any documentation for this apart from a tutorial by Andrew Embler (, which doesn't work in the newest version of concrete5.

Does anyone know how to do this?

View Replies:
Frog replied on at Permalink Reply
I finally figured out how to do this. I now replicate the default edit popup in my own block using the following code:
<div id="myDialogContent" style="display: none;">
My block
<script type="text/javascript">
   buttons: [
         class: 'btn cancel',
         click: function() {
         text: 'Cancel'
         class: 'btn btn-primary save',

To position the buttons correctly I use the following CSS code:
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   width: 100%;
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn {
   margin: 0px;
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
   float: left;
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: right;

I basically just use the jQuery UI dialog class. But because concrete5 only applies the bootstrap styles to elements within an element with class "ccm-ui" I manually add that class to the dialog.

I hope this helps someone else who has the same problem.
SkyBlueSofa replied on at Permalink Reply
I believe I understand what's going on here. How do you trigger showing the dialog? Something like this?