程序员必须小知识:Js各种弹出框展示
author:一佰互联 2019-03-27   click:216

简介:程序员必须小知识:Js各种弹出框展示程序员必须小知识:Js各种弹出框展示1.用页面展示出有哪几种弹出方式: body div a href="#" onclick="show1()"show/a | a href="#" onclick="show2()"slide/a | ...

程序员必须小知识:Js各种弹出框展示

程序员必须小知识:Js各种弹出框展示

程序员必须小知识:Js各种弹出框展示

1.用页面展示出有哪几种弹出方式: <body> <div> <a href="#" onclick="show1()">show</a> | <a href="#" onclick="show2()">slide</a> | <a href="#" onclick="show3()">fade</a> | </div> <div> <a href="#" onclick="alert1()">alert</a> | <a href="#" onclick="alert2()">alert(error)</a> | <a href="#" onclick="alert3()">alert(info)</a> | <a href="#" onclick="alert4()">alert(question)</a> | <a href="#" onclick="alert5()">alert(warning)</a> </div> <div> <a href="#" onclick="confirm1()">confirm</a> </div> <div> <a href="#" onclick="prompt1()">prompt</a> </div></body>2.用CSS对个弹出框来修饰样式;3.用js来实现各种弹出框: <link rel="stylesheet" type="text/css" href="css/dialog.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <link rel="stylesheet" type="text/css" href="css/linkbutton.css"> <link rel="stylesheet" type="text/css" href="css/shadow.css"> <link rel="stylesheet" type="text/css" href="css/messager.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.draggable.js"></script> <script type="text/javascript" src="js/jquery.resizable.js"></script> <script type="text/javascript" src="js/jquery.linkbutton.js"></script> <script type="text/javascript" src="js/jquery.shadow.js"></script> <script type="text/javascript" src="js/jquery.dialog.js"></script> <script type="text/javascript" src="js/jquery.messager.js"></script> <script> function show1(){ $.messager.show({ title:"My Title", msg:"Message will be closed after 4 seconds.", showType:"show" }); } function show2(){ $.messager.show({ title:"My Title", msg:"Message will be closed after 5 seconds.", timeout:5000, showType:"slide" }); } function show3(){ $.messager.show({ title:"My Title", msg:"Message never be closed.", timeout:0, showType:"fade" }); } function alert1(){ $.messager.alert("My Title","Here is a message!"); } function alert2(){ $.messager.alert("My Title","Here is a error message!","error"); } function alert3(){ $.messager.alert("My Title","Here is a info message!","info"); } function alert4(){ $.messager.alert("My Title","Here is a question message!","question"); } function alert5(){ $.messager.alert("My Title","Here is a warning message!","warning"); } function confirm1(){ $.messager.confirm("My Title", "Are you confirm this?", function(r){ alert("confirmed:"+r); }); } function prompt1(){ $.messager.prompt("My Title", "Please type something", function(r){ if (r){ alert("you type:"+r); } }); } </script>版权归属:康诺科技2017/7/18本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yx10011.com学习互联网营销技术请到巅云建站www.yx10011.com。