Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I believe the Durandal modal is receiving love in Durandal 2.1 although I do not know if it will be responsive.</p> <p>In the meanwhile, Durandal provides all the hooks you need to implement your own modal functionality - including the ability to define different types of modal dialogs. You can read more about it here:</p> <p><a href="http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html" rel="nofollow">http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html</a></p> <p>I experimented briefly with this via some code found on google groups and was able to get bootstrap 3 modals working.</p> <p>You're welcome to try it out and see if it works for you. Note that you must be using bootstrap 3 for this to work (durandal 2.0 starterkit etc comes with bootstrap 2)</p> <p>In dialog.js, just before <code>return dialog;</code></p> <pre><code>dialog.addContext('bootstrap', { addHost: function (theDialog) { var body = $('body'); $('&lt;div class="modal fade" id="myModal"&gt;&lt;/div&gt;').appendTo(body); theDialog.host = $('#myModal').get(0); }, removeHost: function (theDialog) { setTimeout(function () { $('#myModal').modal('hide'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); }, 200); }, compositionComplete: function (child, parent, context) { var theDialog = dialog.getDialog(context.model); $('#myModal').modal('show'); }, attached: null }); </code></pre> <p>and then activate with:</p> <p><code>dialog.show(viweModel, null, 'bootstrap')</code></p> <p>or I believe this would work also but I didn't test it:</p> <p><code>dialog.showBootstrap(viewModel)</code></p> <p>And your view should follow the markup pattern:</p> <pre><code>&lt;div class="messageBox"&gt; &lt;div class="modal-header"&gt; Header Markup &lt;/div&gt; &lt;div class="modal-body"&gt; Body Markup &lt;/div&gt; &lt;div class="modal-footer"&gt; Footer Markup &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the gist where I got the code: <a href="https://gist.github.com/webm0nk3y/7603042" rel="nofollow">https://gist.github.com/webm0nk3y/7603042</a></p> <p>And the relevant google groups thread: <a href="https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU" rel="nofollow">https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload