Implementation of modal box in amazeui

Time:2020-10-27

Compared with the “ratchet” modal box (click to open the link), the modal box of amazeui is closer to an alert (), which is not suitable for carrying too much content. However, its advantage is that it can be controlled by JS, and the ratchet can only be opened through the super link a tag.

The modal box effect of amazeui is as follows:

It’s exactly like some mobile browsers handle alert(). The actual code is as follows:

<! -- develop with HTML5 -- >
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <! -- automatically adapt to mobile screen -- >
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <! -- give priority to WebKit kernel rendering -- >
        <meta name="renderer" content="webkit">
        <! -- don't be transcoded by Baidu -- >
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <! -- the following is the introduction of amazeui resources -- >
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <! -- when introducing JS, you must first introduce jQuery and then introduce amazeui, because this framework is developed based on jQuery -- >
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>Modal</title>
    </head>    
    <body>
        < button class = "am BTN am BTN primary" ο nclick = "openmodal()" > open mode box
        
        <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
            <div class="am-modal-dialog">
                <div class="am-modal-bd">
                    Contents of the modal box
                </div>
                <div class="am-modal-footer">
                 < span class = "am modal BTN" > off</span>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
function openModal(){
 $('#my-alert').modal();
}
</script>

Note that the modal box with ID my alert is triggered by the openmodal() function triggered by the onclick event of button.

The JS code to open the modal box is just one line. After obtaining the ID of the modal box, open it through the modal () method.

This article about the implementation of the modal box in amazeui is introduced here. For more related content of the mode box in amazeui, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!

Recommended Today

Java security framework

The article is mainly divided into three parts1. The architecture and core components of spring security are as follows: (1) authentication; (2) authority interception; (3) database management; (4) authority caching; (5) custom decision making; and;2. To build and use the environment, the current popular spring boot is used to build the environment, and the actual […]