jQuery实现的自定义弹出层效果实例详解(2)

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>新建H5模板</title> <link href="https://www.jb51.net/css/dialog.css" /> <style> input[type="button"] { margin: 100px 20px; padding: 10px; } </style> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/dialog.js"></script> </head> <body> <center> <input type="button" value="弹出提示框" /> <input type="button" value="弹出确认框" /> <input type="button" value="弹出iframe" /> </center> <script type="text/javascript"> $(function() { $("#btnAlert").click(function() { $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "弹出提示框", Content: "你好,你选择的内容是空白的", ConfirmFun: test }); }) $("#btnConfirm").click(function() { $.DialogBySHF.Confirm({ Width: 350, Height: 200, Title: "弹出确认框", Content: "你确定要删除这条内容吗", ConfirmFun: test, CancelFun: testCancel }); }) $("#btnDialog").click(function() { $.DialogBySHF.Dialog({ Width: 1024, Height: 500, Title: "新开一个窗口", URL: "https://www.jb51.net" }); }) }) function test() { $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "确认后执行方法", Content: "确认后执行的方法" }); } function testCancel() { $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "取消后执行方法", Content: "取消后执行的方法" }); } </script> </body> </html>

效果图:

jQuery实现的自定义弹出层效果实例详解

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfzjy.html