Custom layer popup style

 

Due to the company's page style iteration, the UI designer designed a new pop-up page, but it was very different from the default layer style, so a new skin had to be made. The intercepted part of the style is as follows:

html #layui_layer_skinspttradestylecss{
    margin: 0;
    padding: 0;
    border: 0;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
body div.layui-layer-class .layui-layer-title{
    width: 100%;
    height: 40px;
    background: #EBF0FA;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    content: "";
    clear: both;
    display: block;
    box-sizing: border-box;
    padding: 0;
}

For the first line of code, mainly to design a new skin style as an extension, the rule is: html #layui_layer_skin{folder name}{file name}css

After setting, you will find that Google Chrome automatically joins

layui-layer-class as shown in the 
figure:

But there was a layui-layer that was a custom skin before, it was not easy to delete, and it was loaded in the decorator mode. What I couldn't figure out was that the loading always had a higher priority than the style I wrote, and I couldn't find the specific reason. , but it doesn't affect my solution to the problem

So I changed to div.layui-layer-class in layui-layer-class, so that layui-layer-class has 1 more priority than layui-layer.

If you want to not display the default button of the layer, define

btn:false,

That's it. The title can be displayed directly like this:

title:'<span class="system_prompt">System Prompt</span>',

For other details, you can check the official API documentation of layer

if used

The custom button or link is in the content. Since the layer is a new pop-up window, it is a new element dynamically generated, and there is no event.

So using $(document).on("click","specified element",function(){}); method is to bind the specified event to the document, and if the newly generated element matches the specified element, trigger this event