當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

弹出层

發布時間：2025/4/16 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了弹出层小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

layer.alert

layer.confirm

layer.prompt

layer.tab

layer.photos(options)

{"title": "相冊標題","id": 123, "start": 0, "data": [ {"alt": "圖片名1","pid": 5, "src": "resources/images/img1.jpg", "thumb": "resources/images/img1.jpg" },{"alt": "圖片名3","pid": 1, "src": "resources/images/img3.jpg", "thumb": "resources/images/img3.jpg" },{"alt": "圖片名4","pid": 2, "src": "resources/images/img4.jpg", "thumb": "resources/images/img4.jpg" },{"alt": "圖片名5","pid": 3, "src": "resources/images/img5.jpg", "thumb": "resources/images/img5.jpg" },{"alt": "圖片名6","pid": 4, "src": "resources/images/img6.jpg", "thumb": "resources/images/img6.jpg" }] }

layer.msg

layer.tips

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表單元素</title><link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body style="padding: 20px"> <button type="button" class="layui-btn" id="btn1">alert</button> <button type="button" class="layui-btn" id="btn2">confirm</button> <button type="button" class="layui-btn" id="btn3">prompt</button> <button type="button" class="layui-btn" id="btn4">tab</button> <button type="button" class="layui-btn" id="btn5">photos</button> <button type="button" class="layui-btn" id="btn6">layer.msg</button><div style="height: 200px;text-align: center;padding: 50px"><button type="button" class="layui-btn" id="btn7">layer.tips</button> </div><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(['element', 'jquery', 'layer', 'form'], function () {var $ = layui.jquery;var element = layui.element;var layer = layui.layer;var form = layui.form;//alert$("#btn1").click(function () {//layer.alert('只想簡單的提示');//layer.alert('加了個圖標', {icon: 5}); //圖標1-7layer.alert('有了回調', function (index) {alert("ok");layer.close(index);});});//confirm$("#btn2").click(function () {layer.confirm('你真的要退出嗎?', {icon: 3, title: '提示'}, function (index) {alert("ok");layer.close(index);});});//prompt$("#btn3").click(function () {/* layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);}); *///例子2layer.prompt({formType: 2,value: '初始值',title: '請輸入值',area: ['800px', '350px'] //自定義文本域寬高}, function (value, index, elem) {alert(value); //得到valuelayer.close(index);});});//tab$("#btn4").click(function () {layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1',content: '內容1'}, {title: 'TAB2',content: '內容2'}, {title: 'TAB3',content: '內容3'}]});});//photos$("#btn5").click(function () {$.get("resources/json/images.json", function (json) {layer.photos({photos: json, anim: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0之前的版本用shift參數）});})});//msg$("#btn6").click(function () {//layer.msg('只想弱弱提示');//layer.msg('有表情地提示', {icon: 6});});//tips$("#btn7").click(function () {layer.tips('只想提示地精準些', '#btn7', {tips: 4});});}); </script> </body> </html>

總結

以上是生活随笔為你收集整理的弹出层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

弹出