How Yii2 uses the Bootbox plug-in to implement custom pop-up windows-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

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

不言

Jun 15, 2018 am 10:57 AM

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(&#39;confirm&#39;);
  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 = &#39;@webroot&#39;;
  public $baseUrl = &#39;@web&#39;;
  public $css = [&#39;css/site.css&#39;];
  // 注册js资源
  public $js = [&#39;js/bootbox.js&#39;, &#39;js/main.js&#39;];
  public $depends = [
    &#39;yii\web\YiiAsset&#39;,
    &#39;yii\bootstrap\BootstrapAsset&#39;,
  ];
}

##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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

PHP's Purpose: Building Dynamic WebsitesApr 15, 2025 am 12:18 AM

PHP is used to build dynamic websites, and its core functions include: 1. Generate dynamic content and generate web pages in real time by connecting with the database; 2. Process user interaction and form submissions, verify inputs and respond to operations; 3. Manage sessions and user authentication to provide a personalized experience; 4. Optimize performance and follow best practices to improve website efficiency and security.

PHP: Handling Databases and Server-Side LogicApr 15, 2025 am 12:15 AM

PHP uses MySQLi and PDO extensions to interact in database operations and server-side logic processing, and processes server-side logic through functions such as session management. 1) Use MySQLi or PDO to connect to the database and execute SQL queries. 2) Handle HTTP requests and user status through session management and other functions. 3) Use transactions to ensure the atomicity of database operations. 4) Prevent SQL injection, use exception handling and closing connections for debugging. 5) Optimize performance through indexing and cache, write highly readable code and perform error handling.

How do you prevent SQL Injection in PHP? (Prepared statements, PDO)Apr 15, 2025 am 12:15 AM

Using preprocessing statements and PDO in PHP can effectively prevent SQL injection attacks. 1) Use PDO to connect to the database and set the error mode. 2) Create preprocessing statements through the prepare method and pass data using placeholders and execute methods. 3) Process query results and ensure the security and performance of the code.

PHP and Python: Code Examples and ComparisonApr 15, 2025 am 12:07 AM

PHP and Python have their own advantages and disadvantages, and the choice depends on project needs and personal preferences. 1.PHP is suitable for rapid development and maintenance of large-scale web applications. 2. Python dominates the field of data science and machine learning.

PHP in Action: Real-World Examples and ApplicationsApr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

PHP: Creating Interactive Web Content with EaseApr 14, 2025 am 12:15 AM

PHP makes it easy to create interactive web content. 1) Dynamically generate content by embedding HTML and display it in real time based on user input or database data. 2) Process form submission and generate dynamic output to ensure that htmlspecialchars is used to prevent XSS. 3) Use MySQL to create a user registration system, and use password_hash and preprocessing statements to enhance security. Mastering these techniques will improve the efficiency of web development.

PHP and Python: Comparing Two Popular Programming LanguagesApr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

The Enduring Relevance of PHP: Is It Still Alive?Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

See all articles