Shulou(Shulou.com)06/01 Report--

This article is about how to implement layui page-level pop-up boxes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Home/Index.cshtml

@ {ViewData ["Title"] = "Home Page";} layui.use (['layer','form'], function () {var $= layui.jquery, layer = layui.layer; / / standalone version of layer does not need to execute the sentence var form = layui.form; / / trigger event var active = {test: function () {layer.alert (' how are you, experiencer') }, test2: function () {layer.confirm ('what do you think of front-end development?' , {btn: ['important', 'weird'] / / button}, function () {layer.msg ('really important', {icon: 1}) }, function () {layer.msg ('can do this', {time: 20000, / / automatically close btn after 20s: ['got it', 'got it']});});}, test3: function () {layer.msg ('playing with life') }, test4: function () {layer.tips ('Hi, I am a tip', this, {tips: 1});}, test5: function () {$('# test11111') .html ("loading...") Layer.open ({title:' updates forum information', type: 1, / / skin: 'layui-layer-rim', area: [' 500pxmessages, '580px'], content: $(' # test11111')}) Get ("@ Url.Action (" Index "," Test ")" + "? t =" + (Math.random ()), function (result) {$('# test11111') .html (result); form.render (null, "first"); $("# dvName"). Html ("mydiv11");}) }, test6: function () {layer.open ({type: 2, content: 'http://fly.layui.com/', area: [' 375px, '500px'], maxmin: true}) }, test7: function () {layer.prompt ({title: 'enter any password and confirm', formType: 1}, function (pass, index) {layer.close (index); layer.prompt ({title: 'whatever you write and confirm', formType: 2}, function (text, index) {layer.close (index); layer.msg ('demonstration is over! Your password:'+ pass +'

You finally wrote:'+ text);});}) }, test8: function () {layer.tab ({area: ['600pxregions,' 300px`], tab: [{title: 'TAB1', content:' content 1'}, {title: 'TAB2', content:' content 2'}, {title: 'TAB3'') Content: 'content 3'}]}) }}; $('.demo') .on ('click', function () {var type = $(this) .data (' type'); active [type]? Active [type]. Call (this):';});}); AlertConfirmMsgTipsPageIframePromptTab loading.

TestController.cs

Using Microsoft.AspNetCore.Mvc;using System;using System.Threading.Tasks; namespace layuidemo.Controllers {public class TestController: Controller {public async Task Index () {await Task.Delay (TimeSpan.FromSeconds (5)); return View ();}

Test/Index.cshtml

@ * For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860*@@{ Layout = null } HI world GGFLY input box Mobile email password be sure to fill in the user name range-in-line form Please choose the first city where you work, your job number, your favorite teacher select grouping, please choose the first city where you work, your job number. Your favorite teacher selection box, writing, reading games, music, travel, search, selection box, please search for writing, reading game sounds Happy Travel Reading layer laydate 3 layim laypage 6 7 8 check box original check box switch off Please fill in the description and submit the reset input box immediately. Password please be sure to fill in the user name range-line form Please select the question, the first city where you work, your job number, your favorite teacher Select group Please select the first city where you work, your job number, your favorite teacher selection box. Writing Reading Game Music Travel search option box Please search Writing Reading Game Music Travel Reading layer laydate 3 layim laypage 6 7 8 check box original check box switch off switch on and off check box Please fill in the description and submit the reset immediately

Run effect: lay-filter= "first" will re-render the form, lay-filter= "second" will not re-render

Thank you for reading! On "how to achieve layui page-level pop-up box" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.