layui implements a modal box function similar to bootstrap

　　I used to be accustomed to the modal box of bootstrap, and suddenly changed to layui, and wanted to use layui to realize the modal box function similar to bootstrap.

The layer module of layui is used, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">

    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="../JS/jquery-1.8.3.js"></script>
    <script>
        function openModak(){
            $("[name='testname']").val("xxxxxxxxxxxxxxx");//Assign value to the modal box
            layui.use(['layer'],function () {
                var layer = layui.layer,$=layui.$;
                layer.open({
                    type:1,//type
                    area:['800px','600px'],//Define width and height
                    title: 'View details',//Title
                    shadeClose:false,//Click the mask layer to close
                    content: $('#motaikunag')//Open content
                });
            })
        }
    </script>

</head>
<body>

< button type = "button" onclick = "openModak()" > Open the modal box </ button >

</body>
</html>

<!--模仿bootstrap的模态框-->
<div id="motaikunag" style="display: none;">
    <input type="text" name="testname" value="">
    <br/>
    <input type="button" onclick="javascript:alert('点击按钮')" title="点我" value="点我">
</div>

type - the base layer type:

type: Number, default: 0

layer provides 5 layer types. The values that can be passed in are: 0 (information box, default) 1 (page layer) 2 (iframe layer) 3 (loading layer) 4 (tips layer) . If you use layer.open({type: 1}) to call, type is required (except the information box)

content - the content

Type: String/DOM/Array, Default: ''

The value that content can pass in is flexible and changeable, not only can pass in ordinary html content, but also specify the DOM, and it can be different according to the type. for example:

/!*
 If it is a page layer
 */
layer.open({
  type: 1,
  content: 'Pass in any text or html' //here content is a normal String
});
layer.open({
  type: 1,
  content: $('#id') //here content is a DOM, note: it is best to store this element in the outermost layer of the body, otherwise it may be affected by other relative elements
});
//Ajax get
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //Note that if str is an object, character splicing is required.
  });
});
/!*
 If it is an iframe layer
 */
layer.open({
  type: 2,
  content: 'http://sentsin.com' //here content is a URL, if you don't want the iframe to scroll, you can also content: ['http://sentsin.com', 'no']
});
/!*
 If you use layer.open to execute the tips layer
 */
layer.open({
  type: 4,
  content: ['content', '#id'] //The second item of the array is the adsorption element selector or DOM
});

layui implements a modal box function similar to bootstrap

Guess you like