创建并打开 bootstrap 模态 window

Question

我想用 bootstrap 模态 window 替换当前的 dhtmlx 模态 window。我的应用程序目前使用一个容器来存储 dthmlx 模态 window 的实例并使用它。

myContainer = new dhtmlXWindows();

我想对 bootstrap 做同样的事情，但我似乎无法打开 bootstrap 模态实例，即使在 JSFiddle 中也是如此。

我发现 an exemple of what I want to do 看起来像这样：

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

但此代码在 the JSFiddle I created to test it 中没有任何作用。

您能知道如何解决我的问题吗？我不想使用 HTML 代码来创建对话框，我需要像在我的 fiddle.

中那样在 JS 中使用它

谢谢。

Answer 1

// 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>

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

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

创建并打开 bootstrap 模态 window

Create and open a bootstrap modal window

modal-dialog

instance

twitter-bootstrap