Detailed explanation of Bootstrap BootstrapDialog

There are two ways to display

Written in advance: First, you need to import the libraries
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js

1、Displayed by HTML code

<!-- Button to trigger modal pop-up -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal pop-up structure -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This method is simple and intuitive; but it will increase the 'weight' of html, and it is not flexible enough, so it is not recommended to use it extensively

2Through js to display (the places that need attention are all written in comments)

(1The simplest implementation method:

BootstrapDialog.show({
  message: 'Hi Apple!'
});

There is also a simpler implementation method: BootstrapDialog.alert('I want banana!'); //Asynchronous loading, suitable for use at the end of the method

(2)]

BootstrapDialog.show({
  message : "message",
  buttons : [{
    label : "btn",1",
    cssClass : "btn",-primary"   //Add class name to the button, you can add styles to the button in this way
    },{
      label : "btn",2",
      icon : "glyphicon glyphicon-ban-circle"   //Add icon button through bootstrap styles
    },{
      label : "btn",3",
      action : function(dialog){   //Add click event to the current button
        dialog.close();
      }
    }
  ]
});

(3Operation title and message can be set through setTitle and setMessage operations

BootstrapDialog.show({
  title : "this is a title!",    //title
  message : "Document Content",
  buttons : [{
    label : "cancel",
    action : function(dialog){
      dialog.setTitle("title2");   //operation title
      dialog.setMessage("message1");   //operation message
      dialog.close();
    }
  },{
    label : "Ok",
    action : function(dialog){
      dialog.close();
    }
  }]
})

(4Button Hotkey (In my opinion, it is not commonly used)

BootstrapDialog.show({
  title: 'Button Hotkey',
  message: 'Try to press some keys...',
  onshow: function(dialog) {
    dialog.getButton('button')-c').disable();   //Get the button through getButton('id')
  },
  buttons: [{
    label: '(A) Button A',
    hotkey: 65, // Keycode of keyup event of key 'A' is 65.
    action: function() {
      alert('Finally, you loved Button A.');
    }
  },
    label: '(B) Button B',
    hotkey: 66,
    action: function() {
      alert('Hello, this is Button B!');
    }
  },
    id: 'button',-c',
    label: '(C) Button C',
    hotkey: 67,
    action: function(){
      alert('This is Button C but you won't see me dance.');
    }
  }]
})

(5Dynamic loading of message

BootstrapDialog.show({
  //message : $("<div></div>").load('content.html')   //The first method
  message : function(content){    //The second method
    var $message = $("<div></div>");
    var loadData = content.getData("contentFile");
    $message.load(loadData);
    return $message;   //Always remember to return the value!
  },
  data : {"contentFile" :"content.html"}
});

(6Control the close button at the top right corner of the popup box

BootstrapDialog.show({
  message: 'Hi Apple!',
  closable: true,    //Control whether the 'x' is displayed at the top right corner of the popup box, default is true
  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();   //Always able to close the popup box
    }
  }]
});

(7The size of the popup box

BootstrapDialog.show({
  title: 'More dialog sizes',
  message: 'Hi Apple!',
  size : BootstrapDialog.SIZE_NORMAL  //Default Size
  buttons: [{
    label: 'Normal',
    action: function(dialog){
      dialog.setTitle('Normal');
      dialog.setSize(BootstrapDialog.SIZE_NORMAL);
    }
  },
    label: 'Small',
    action: function(dialog){
      dialog.setTitle('Small');
      dialog.setSize(BootstrapDialog.SIZE_SMALL);
    }
  },
    label: 'Wide',
    action: function(dialog){
      dialog.setTitle('Wide');
      dialog.setSize(BootstrapDialog.SIZE_WIDE);
    }
  },
    label: 'Large',
    action: function(dialog){
      dialog.setTitle('Large');
      dialog.setSize(BootstrapDialog.SIZE_LARGE);
    }
  }]
});

That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)