Erstellen und öffnen Sie ein Bootstrap-modales Fenster

Question

Ich möchte mein aktuelles modales Fenster mit einem Bootstrap modalen Fenster ersetzen. Meine Anwendung verwendet derzeit einen Container, um die Instanz des dthmlx modalen Fensters zu speichern und zu verwenden.

myContainer = new dhtmlXWindows(); 

Ich möchte das gleiche mit Bootstrap tun, aber ich kann nicht eine Bootstrap-modal-Instanz öffnen, auch in JSFiddle scheinen zu können.

fand ich an exemple of what I want to do die wie folgt aussieht:

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

Aber dieser Code tut nichts in the JSFiddle I created to test it.

Hätten Sie eine Idee, wie Sie mein Problem lösen können? Ich möchte nicht HTML-Code verwenden, um den Dialog zu erstellen, ich muss das in JS wie in meiner Geige haben.

Danke trotzdem.

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>

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

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