Yii2 use Bootbox plugin to implement custom window _javascript tips

This time try a new widget "Bootbox".

Yii2 in the use of bootstarp, so that the interface more beautiful, but the drawback is that in the GridView table action, delete the function of the window is a bit with bootstrap Shong, found a solution online, sharing the use of this plug-in process.

Bootbox.js is a small JavaScript library used to create simple programmable dialog boxes based on the bootstrap modal (modal box).

Official description

Http://bootboxjs.com/v3.x/index.html

Bootbox.js Download

We can find the open source bootbox.js download on the GitHub

Https://github.com/makeusabrew/bootbox

How do I use this plugin?

Combining the Yii2 's GridView, we come from defining the Bootbox style of the pinball window:

One, cover yii.js module

The Build Confirm dialog box is defined in the Yii2 yii.js, and the action action is performed.

We can use the overlay JS method to achieve the goal.

Create a JavaScript file, such as Main.js, under the @app/web/js/path.

The code is as follows:

Yii.allowaction = function ($e) {
  var message = $e. Data (' confirm ');
  return message = = Undefined | | Yii.confirm (message, $e);
---Delete action (bootbox)---
yii.confirm = function (message, OK, cancel) {

  bootbox.confirm (
    {
      mess Age:message,
      buttons: {
        confirm: {
          label: ' OK
        } ',
        Cancel: {
          label: ' Cancel '
        }
      },
      callback:function (confirmed) {
        if (confirmed) {
          !ok | | | ok ();
        } else {
          !cancel | | canc El ();}}}
  );
  Confirm'll always return false on the ' I Call
  /' Cancel Click handler return
  false;
}

Second, register your resource bundle

Registration of Bootbox.js and main.js files is required.

Modify File: @app/assets/assets.php

The code is as follows:

namespace Backend\assets;

Use Yii\web\assetbundle;

Class Appasset extends Assetbundle
{public
  $basePath = ' @webroot ';
  Public $baseUrl = ' @web ';
  Public $css = [' css/site.css '];
  Register JS Resources public
  $js = [' js/bootbox.js ', ' js/main.js '];
  Public $depends = [
    ' Yii\web\yiiasset ',
    ' Yii\bootstrap\bootstrapasset ',
  ];
}

Three, custom modal box

Understand the Bootbox.js source code, you can know bootbox.js use is the bootstarp modal box, we can according to demand

Modify the "templates" variable in the Bootbox.js source code and customize the modal style.

Look at the comparison results:

Before modification:

After modification:

The moment is much more comfortable, the window function becomes less Shong. There are a lot of window plug-ins like this, and I think you can use the same method to implement other plug-ins.

The above mentioned is the entire content of this article, I hope you can enjoy.