Question

I ran across this very nice jQuery/bootstrap modal plugin:

http://nikku.github.com/jquery-bootstrap-scripting/

However, in trying to get the simplest example to work, I ran into an issue

My dialog, copied from their site, is being displayed when the page first loads.

Html:

<a class="open-dialog" rel="sample1-dialog">trigger</a>

<div id="sample1-dialog" style="display: none">
    <h1>Simple alert</h1>
    <p>
        It is always beneficial to acknowledge alerts of any kind.
        You can close this alert if you agree. 
        (Note: Normally a dialog box is not that penetrating)
    </p>
    <div class="form-actions">
        <button class="btn-primary close-dialog">Understood</button>
        <button class="btn-danger" onclick="alert('You might reconsider your click behaviour!')">I don't care</button>
    </div>
</div>

jQuery:

    $(function () {
         $("#sample1-dialog").dialog2({
            showCloseHandle: false,
            removeOnClose: false,
            autoOpen: false,
            closeOnEscape: true,
            closeOnOverlayClick: true
        });

        $(".open-dialog").click(function (event) {
            event.preventDefault();
            $("#sample1-dialog").dialog2("open");
        });

Here’s a fiddle that shows the issue:

fiddle

I can’t believe that this is a problem with their code. Their samples work fine.

Am I missing something obvious?

Answer 1

The fix is to change line 26 of jquery.dialog2.js to:

var __DIALOG_HTML = "<div class='modal' style=\"display: none;\">" +

https://github.com/Nikku/jquery-bootstrap-scripting/issues/50#issuecomment-7394968