CODEWITHSUNDEEP
twitter-bootstrapmodal-dialoginstance
David Gourde
David Gourde

Reputation: 3914

Create and open a bootstrap modal window

I want to replace my current dhtmlx modal window with a bootstrap modal window. My application currently use a container to store the dthmlx modal window's instance and use it.

myContainer = new dhtmlXWindows();

I want to do the same with bootstrap but I cannot seem to be able to open a bootstrap modal instance, even in JSFiddle.

I found an exemple of what I want to do that looks like this:

var dialogInstance = new BootstrapDialog({
   title: 'Dialog instance',
   message: 'Hi Apple!'
 });
 dialogInstance.open();

But this code does nothing in the JSFiddle I created to test it.

Would you have an idea on how to resolve my problem? I don't want to use HTML code to create the dialog, I need to have that in JS like in my fiddle.

Thanks anyway.

Upvotes: 0

Views: 194

Answers (1)

Anil Panwar
Anil Panwar

Reputation: 2622

// 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();
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/css/bootstrap-dialog.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script>

Refer: http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/

Refer: http://www.jqueryscript.net/lightbox/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog.html

Upvotes: 1

Related Questions