How Yii2 uses the Bootbox plug-in to implement custom pop-up windows

This article mainly introduces how Yii2 uses the Bootbox plug-in to implement customized pop-up windows. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Bootbox.js is a A small JavaScript library for creating simple programmable dialog boxes, developed using Twitter's Bootstrap. Today we will study how to use the bootbox plug-in to implement custom pop-up windows.

This time I tried a new plug-in "bootbox".

Bootstarp is used in Yii2 to make the interface more beautiful, but the only drawback is that in the Action of the Gridview table, the pop-up window of the delete function is a bit inconsistent with Bootstrap. I found a solution online and shared it. Below is the process of using this plug-in.

Bootbox.js is a small JavaScript library used to create simple programmable dialog boxes, based on Bootstrap's Modal (modal box).

Bootbox.js download

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

How to use this plug-in?

Combined with Yii2's GridView, we can customize the Bootbox style pop-up window:

1. Cover the yii.js module

Yii2's own yii Generating the confirm dialog box and executing the action operation are defined in .js.

We can use the overriding js method to achieve our goal.

Create a javascript file in the @app/web/js/ path, such as main.js.

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(
    {
      message: message,
      buttons: {
        confirm: {
          label: "OK"
        },
        cancel: {
          label: "Cancel"
        }
      },
      callback: function (confirmed) {
        if (confirmed) {
          !ok || ok();
        } else {
          !cancel || cancel();
        }
      }
    }
  );
  // confirm will always return false on the first call
  // to cancel click handler
  return false;
}

2. Register your resource package

Need to register bootbox .js and main.js files.

Modify the 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'];
  // 注册js资源
  public $js = ['js/bootbox.js', 'js/main.js'];
  public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
  ];
}

##3. Custom Modal box

Understand the bootbox.js source code. You can know that bootbox.js uses the modal box of bootstarp. We can modify the bootbox.js source code according to our needs

"templates" variable, customize Modal style.

Look at the comparison results:

Before modification:

After modification:

I feel much more comfortable instantly, and the pop-up function is no longer so inconsistent. There are many pop-up plug-ins like this, and I think other plug-ins can be implemented in the same way.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement Command task processing through Yii

How to solve the problem of session cross-domain coexistence under Yii2 The problem

The above is the detailed content of How Yii2 uses the Bootbox plug-in to implement custom pop-up windows. For more information, please follow other related articles on the PHP Chinese website!