githab
/
bootstrap3-dialog


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
							<!DOCTYPE html>
<html>
<head>
<script src="assets/jquery/jquery-1.10.2.min.js"></script>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/prettify/run_prettify.js"></script>
<link href="assets/bootstrap-dialog/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" />
<script src="assets/bootstrap-dialog/js/bootstrap-dialog.js"></script>
<meta charset="utf-8" />
<title>BootstrapDialog examples</title>
</head>
<body style="padding-bottom: 100px;">
<div class="container">
    
    <h2>Make use of Twitter Bootstrap's modal more monkey-friendly.</h2>
    <hr />
    <p>
        Monkeys love the <a href="http://getbootstrap.com/javascript/#modals" target="_blank">Modal Dialog from Twitter Bootstrap</a>, but they're getting angry because they have to write this stuff:
    </p>
    <pre class="prettyprint">&lt;div class="modal fade"&gt;<br />  &lt;div class="modal-dialog"&gt;<br />    &lt;div class="modal-content"&gt;<br />      &lt;div class="modal-header"&gt;<br />        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;<br />        &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;<br />      &lt;/div&gt;<br />      &lt;div class="modal-body"&gt;<br />        &lt;p&gt;One fine body&hellip;&lt;/p&gt;<br />      &lt;/div&gt;<br />      &lt;div class="modal-footer"&gt;<br />        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;<br />        &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;<br />      &lt;/div&gt;<br />    &lt;/div&gt;&lt;!-- /.modal-content --&gt;<br />  &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;<br />&lt;/div&gt;&lt;!-- /.modal --&gt;
    </pre>
    <p>
        What they want is more like this:
    </p>
    <div class="source-code runnable">
        BootstrapDialog.alert('I want banana!');
    </div>
    <p></p>
    <p>
        Like it? See <a href="#available-options">Available Options</a> or try more <a href="#examples">Examples</a> below. 
    </p>
    
    <!-- Examples -->
    <a name="examples"></a>
    <h2>Examples</h2>
    <hr />
    
    <h3>Simplest</h3>
    <p>Provide only the message to show, and keep all other things default.</p>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            message: 'Hi Apple!'
        });
        -->
    </div>
    
    <h3>Title</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            title: 'Say-hello dialog',
            message: 'Hi Apple!'
        });
        -->
    </div>

    <h3>Buttons</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });
        -->
    </div>

    <h3>Creating dialog instances</h3>
    <p>BootstrapDialog.show(...) is just a shortcut method, if you need dialog instances, use 'new'.</p>
    <div class="source-code runnable">
        <!--
        // Using init options
        var dialogInstance1 = new BootstrapDialog({
            title: 'Dialog instance 1',
            message: 'Hi Apple!'
        });
        dialogInstance1.open();
        
        // Construct by using setters
        var dialogInstance2 = new BootstrapDialog();
        dialogInstance2.setTitle('Dialog instance 2');
        dialogInstance2.setMessage('Hi Orange!');
        dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
        dialogInstance2.open();
        
        // Using chain callings
        var dialogInstance3 = new BootstrapDialog()
            .setTitle('Dialog instance 3')
            .setMessage('Hi Everybody!')
            .setType(BootstrapDialog.TYPE_INFO)
            .open();
        -->
    </div>
    
    <h3>Open / Close multiple dialogs</h3>
    <p>This example demonstrates opening and closing a batch of dialogs at one time. <br />Dialog that created by BootstrapDialog will be in a container <strong>BootstrapDialog.dialogs</strong> before it's closed and destroyed, iterate <strong>BootstrapDialog.dialogs</strong> to find all dialogs that havn't been destroyed.</p>
    <div class="source-code runnable">
        <!--
        var howManyDialogs = 5;
        for(var i = 1; i <= howManyDialogs; i++) {
            var dialog = new BootstrapDialog({
                title: 'Dialog No.' + i,
                message: 'Hello Houston, this is dialog No.' + i,
                buttons: [{
                    label: 'Close this dialog.',
                    action: function(dialogRef){
                        dialogRef.close();
                    }
                }, {
                    label: 'Close ALL opened dialogs',
                    cssClass: 'btn-warning',
                    action: function(){
                        $.each(BootstrapDialog.dialogs, function(id, dialog){
                            dialog.close();
                        });
                    }
                }]
            });
            dialog.open();
        }
        -->
    </div>
    
    <h3>Button with identifier</h3>
    <div class="source-code runnable">
        <!--
        var dialog = new BootstrapDialog({
            message: 'Hi Apple!',
            buttons: [{
                id: 'btn-1',
                label: 'Button 1'
            }]
        });
        dialog.realize();
        var btn1 = dialog.getButton('btn-1');
        btn1.click({'name': 'Apple'}, function(event){
            alert('Hi, ' + event.data.name);
        });
        dialog.open();
        -->
    </div>
    
    <h3>Message types</h3>
    <div class="source-code runnable">
        <!--
        var types = [BootstrapDialog.TYPE_DEFAULT, 
                     BootstrapDialog.TYPE_INFO, 
                     BootstrapDialog.TYPE_PRIMARY, 
                     BootstrapDialog.TYPE_SUCCESS, 
                     BootstrapDialog.TYPE_WARNING, 
                     BootstrapDialog.TYPE_DANGER];
                     
        $.each(types, function(index, type){
            BootstrapDialog.show({
                type: type,
                title: 'Message type: ' + type,
                message: 'What to do next?',
                buttons: [{
                    label: 'I do nothing.'
                }]
            });     
        });
        -->
    </div>
    
    <h3>Larger dialog</h3>
    <p>
        By default, the dialog size is 'size-normal' or BootstrapDialog.SIZE_NORMAL, but you can have a larger dialog by setting option 'size' to 'size-large' or BootstrapDialog.SIZE_LARGE.
    </p>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            size: BootstrapDialog.SIZE_LARGE,
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });
        -->
    </div>
    
    <h3>Rich message</h3>
    <p>BootstrapDialog supports displaying rich content, so you can even use a video clip as your message in the dialog.</p>
    <div class="source-code runnable">
        <!--
        var $textAndPic = $('<div></div>');
        $textAndPic.append('Who\'s this? <br />');
        $textAndPic.append('<img src="./images/pig.ico" />');
        
        BootstrapDialog.show({
            title: 'Guess who that is',
            message: $textAndPic,
            buttons: [{
                label: 'Acky',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }, {
                label: 'Robert',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });
        -->
    </div>
    
    <h3>Dialog closable / unclosable</h3>
    <p>
        If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().
    </p>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            message: 'Hi Apple!',
            closable: false,
            buttons: [{
                label: 'Dialog CLOSABLE!',
                cssClass: 'btn-success',
                action: function(dialogRef){
                    dialogRef.setClosable(true);
                }
            }, {
                label: 'Dialog UNCLOSABLE!',
                cssClass: 'btn-warning',
                action: function(dialogRef){
                    dialogRef.setClosable(false);
                }
            }, {
                label: 'Close the dialog',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });
        -->
    </div>
    
    <h3>Auto spinning icon</h3>
    <p>
        Lazy guys must love this.
    </p>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            message: 'I send ajax request!',
            buttons: [{
                icon: 'glyphicon glyphicon-send',
                label: 'Send ajax request',
                cssClass: 'btn-primary',
                autospin: true,
                action: function(dialogRef){
                    dialogRef.enableButtons(false);
                    dialogRef.setClosable(false);
                    dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
                    setTimeout(function(){
                        dialogRef.close();
                    }, 5000);
                }
            }, {
                label: 'Close',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });
        -->
    </div>
    
    <h3>Manipulating your dialog</h3>
    <div class="source-code runnable">
        <!--
        var dialog = new BootstrapDialog({
            message: function(dialogRef){
                var $message = $('<div>OK, this dialog has no header and footer, but you can close the dialog using this button: </div>');
                var $button = $('<button class="btn btn-primary btn-lg btn-block">Close the dialog</button>');
                $button.on('click', {dialogRef: dialogRef}, function(event){
                    event.data.dialogRef.close();
                });
                $message.append($button);
        
                return $message;
            },
            closable: false
        });
        dialog.realize();
        dialog.getModalHeader().hide();
        dialog.getModalFooter().hide();
        dialog.getModalBody().css('background-color', '#0088cc');
        dialog.getModalBody().css('color', '#fff');
        dialog.open();
        -->
    </div>
    
    <h3>Data binding</h3>
    <div class="source-code runnable">
        <!--
        var data1 = 'Apple';
        var data2 = 'Orange';
        var data3 = ['Banana', 'Pear'];
        BootstrapDialog.show({
            message: 'Hi Apple!',
            data: {
                'data1': data1,
                'data2': data2,
                'data3': data3
            },
            buttons: [{
                label: 'See what you got',
                cssClass: 'btn-primary',
                action: function(dialogRef){
                    alert(dialogRef.getData('data1'));
                    alert(dialogRef.getData('data2'));
                    alert(dialogRef.getData('data3').join(', '));
                }
            }]
        });
        -->
    </div>
    
    <h3>Dialog events</h3>
    <p>
        Two dialog level events are supported currently: onshow, onhide. <br />
        Please note that if you're going to use setters to configure event handlers, use dialog.onShow(function) and dialog.onHide(function).
    </p>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.show({
            message: 'Hello world!',
            onshow: function(dialogRef){
                alert('Dialog is popping up, its message is ' + dialogRef.getMessage());
            },
            onhide: function(dialogRef){
                alert('Dialog is popping down, its message is ' + dialogRef.getMessage());
            }
        });
        -->
    </div>
    
    <h2>More shortcut methods</h2>
    <hr />
    <h3>Alert</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.alert('Hi Apple!');
        -->
    </div>
    
    <h3>Alert with callback</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.alert('Hi Apple!', function(){
            alert('Hi Orange!');
        });
        -->
    </div>
    
    <h3>Confirm</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.confirm('Hi Apple, are you sure?');
        -->
    </div>
    
    <h3>Confirm with callback</h3>
    <div class="source-code runnable">
        <!--
        BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
            if(result) {
                alert('Yup.');
            }else {
                alert('Nope.');
            }
        });
        -->
    </div>
    
    <h3>Source code of the shortcut methods above</h3>
    <p>
        I mean you can write your owned handy stuff :)
    </p>
    <div class="source-code">
        <!--
        /**
         * Alert window
         * 
         * @param {type} message
         * @param {type} callback
         * @returns {undefined}
         */
        BootstrapDialog.alert = function(message, callback) {
            new BootstrapDialog({
                message: message,
                data: {
                    'callback': callback
                },
                closable: false,
                buttons: [{
                        label: 'OK',
                        action: function(dialog) {
                            typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
                            dialog.close();
                        }
                    }]
            }).open();
        };

        /**
         * Confirm window
         * 
         * @param {type} message
         * @param {type} callback
         * @returns {undefined}
         */
        BootstrapDialog.confirm = function(message, callback) {
            new BootstrapDialog({
                title: 'Confirmation',
                message: message,
                closable: false,
                data: {
                    'callback': callback
                },
                buttons: [{
                        label: 'Cancel',
                        action: function(dialog) {
                            typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
                            dialog.close();
                        }
                    }, {
                        label: 'OK',
                        cssClass: 'btn-primary',
                        action: function(dialog) {
                            typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
                            dialog.close();
                        }
                    }]
            }).open();
        };
        -->
    </div>
    
    <!-- Available options -->
    <a name="available-options"></a>
    <h2>Available options</h2>
    <hr />
    <p>
        Please note that all options described below are <strong>optional</strong>, but you will have a weird dialog if you don't even give it a message to display.
        <br />
        Most options can be set via init options or property setters.
    </p>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>
                    Option
                </th>
                <th>
                    Possible values
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>type</td>
                <td>
                    BootstrapDialog.TYPE_DEFAULT or 'type-default' <br />
                    BootstrapDialog.TYPE_INFO or 'type-info' <br />
                    <strong>BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default)</strong> <br />
                    BootstrapDialog.TYPE_SUCCESS or 'type-success' <br />
                    BootstrapDialog.TYPE_WARNING or 'type-warning' <br />
                    BootstrapDialog.TYPE_DANGER or 'type-danger'
                </td>
                <td>
                    Give your dialog a specific look, color scheme can be seen on <a href="http://getbootstrap.com/css/#buttons" target="_blank">Bootstrap's Button</a>.
                </td>
            </tr>
            <tr>
                <td>size</td>
                <td>
                    <strong>BootstrapDialog.SIZE_NORMAL or 'size-normal' (default)</strong> <br />
                    BootstrapDialog.SIZE_LARGE or 'size-large' <br />
                </td>
                <td>
                    -
                </td>
            </tr>
            <tr>
                <td>title</td>
                <td>
                    String or Object(html)
                </td>
                <td>
                    -
                </td>
            </tr>
            <tr>
                <td>message</td>
                <td>
                    String or Object(html)
                </td>
                <td>
                    -
                </td>
            </tr>
            <tr>
                <td>buttons</td>
                <td>
                    array
                </td>
                <td>
                    Examples:
<div class="source-code runnable">
BootstrapDialog.show({
    title: 'Say-hello dialog',
    message: 'Hello world!',
    buttons: [{
        id: 'btn-ok',   
        icon: 'glyphicon glyphicon-check',       
        label: 'OK',
        cssClass: 'btn-primary', 
        autospin: false,
        action: function(dialogRef){    
            dialogRef.close();
        }
    }]
});
</div>
                    <strong>id</strong>: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. <br />
                    <strong>icon</strong>: optional, if set, the specified icon will be added to the button. <br />
                    <strong>cssClass</strong>: optinal, additional css class to be added to the button. <br />
                    <strong>autospin</strong>: optinal, if it's true, after clicked the button a spinning icon appears. <br />
                    <strong>action</strong>: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
                </td>
            </tr>
            <tr>
                <td>closable</td>
                <td>
                    true | false
                </td>
                <td>
                    When set to <strong>true</strong>, you can close the dialog by: <br />
                    <ul>
                        <li>Clicking the close icon in dialog header.</li>
                        <li>Clicking outside the dialog.</li>
                        <li>ESC key.</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>spinicon</td>
                <td>
                    Icon class name, for example 'glyphicon glyphicon-check'. <br />
                    <strong>Default value is 'glyphicon glyphicon-asterisk'.</strong>
                </td>
                <td>
                    Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.
                </td>
            </tr>
            <tr>
                <td>data</td>
                <td>
                    Key-value object. For example {'id' : '100'}
                </td>
                <td>
                    Data to be bound to the dialog.
                </td>
            </tr>
            <tr>
                <td>onshow</td>
                <td>
                    function
                </td>
                <td>
                    If provided, it will be invoked when the dialog is popping up. <br />
                </td>
            </tr>
            <tr>
                <td>onhide</td>
                <td>
                    function
                </td>
                <td>
                    If provided, it will be invoked when the dialog is popping down. <br />
                </td>
            </tr>
            <tr>
                <td>autodestroy</td>
                <td>
                    <strong>true (default)</strong> | false
                </td>
                <td>
                    When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.
                </td>
            </tr>
        </tbody>
            
    </table>
    
    <!-- Available methods -->
    <a name="available-methods"></a>
    <h2>Available methods</h2>
    <hr />
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>
                    Method
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>open()</td>
                <td>Open the dialog. Usage: dialogInstance.open()</td>
            </tr>
            <tr>
                <td>close()</td>
                <td>Close the dialog. Usage: dialogInstance.close()</td>
            </tr>
            <tr>
                <td>getModal()</td>
                <td>Return the raw modal, equivalent to $('&lt;div class='modal fade'...&gt;&lt;/div&gt;')</td>
            </tr>
            <tr>
                <td>getModalDialog()</td>
                <td>Return the raw modal dialog.</td>
            </tr>
            <tr>
                <td>getModalContent()</td>
                <td>Return the raw modal content.</td>
            </tr>
            <tr>
                <td>getModalHeader()</td>
                <td>Return the raw modal header.</td>
            </tr>
            <tr>
                <td>getModalBody()</td>
                <td>Return the raw modal body.</td>
            </tr>
            <tr>
                <td>getModalFooter()</td>
                <td>Return the raw modal footer.</td>
            </tr>
            <tr>
                <td>getData(key)</td>
                <td>Get data entry according to the given key, returns null if no data entry found.</td>
            </tr>
            <tr>
                <td>setData(key, value)</td>
                <td>Bind data entry to dialog instance, value can be any types that javascript supports. </td>
            </tr>
            <tr>
                <td>enableButtons(boolean)</td>
                <td>Disable all buttons in dialog footer when it's false, enable all when it's true.</td>
            </tr>
            <tr>
                <td>setClosable(boolean)</td>
                <td>When set to true (default), dialog can be closed by clicking close icon in dialog header, or by clicking outside the dialog, or, ESC key is pressed.</td>
            </tr>
            <tr>
                <td>realize()</td>
                <td>Calling dialog.open() will automatically get this method called first, but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open().</td>
            </tr>
        </tbody>
    </table>
    
    <hr />
    <footer class="text-center"><a href="https://github.com/nakupanda/bootstrap3-dialog">Go to the project.</a> | <a href="mailto:javanoob@hotmail.com">Contact me</a> if you can help to improve this example page.</footer>
</div>

<script type="text/javascript">
$(function(){
    $('.source-code').each(function(index){
        var $section = $(this);
        var code = $(this).html().replace('<!--', '').replace('-->', '');
        
        // Code preview
        var $codePreview = $('<pre class="prettyprint lang-javascript"></pre>');
        $codePreview.text(code);
        $section.html($codePreview);
        
        // Run code
        if($section.hasClass('runnable')){
            var $button = $('<button class="btn btn-primary">Run the code</button>');
            $button.on('click', {code: code}, function(event){
                eval(event.data.code);
            });
            $button.insertAfter($section);
            $('<div class="clearfix" style="margin-bottom: 10px;"></div>').insertAfter($button);
        }
    });
});
</script>
</body>
</html>