这里需要用到一个插件layer.js,下载地址http://xu.sentsin.com/jquery/layer/
当然也是需要引入jquery.js的,jquery的版本要求在1.8.2以上
- <script type="text/javascript" src="jquery-1.8.2.js"></script>
- <script type="text/javascript" src="layer/layer.js"></script>
- <script type="text/javascript" >
- $(document).ready(function (){
- $("#demo1").click(function (){
- $.layer({
- area : ['auto','auto'],
- dialog : {msg:'web攻城师kenan',type : 8}
- });
- });
- $("#demo2").click(function (){
- $.layer({
- shade : ['',false],
- area : ['auto','auto'],
- title : ['',false],
- dialog : {msg:'web攻城师kenan'}
- });
- });
- $("#demo3").click(function (){
- $.layer({
- time:2,
- closeBtn : [0 , false],
- shade : ['',false],
- area : ['auto','auto'],
- title : ['',false],
- dialog : {msg:'web攻城师kenan'}
- });
- });
- $("#demo4").click(function (){
- $.layer({
- shade : [0.5,'',false],
- area : ['auto','auto'],
- dialog : {
- msg:'您是如何看待web开发?',
- btns : 2,
- type : 4,
- btn : ['重要','奇葩'],
- yes : function(){
- layer.msg('您选择了重要。',2,1);
- },
- no : function(){
- layer.msg('奇葩!!!',2,4);
- }
- }
- });
- });
- $("#demo5").click(function (){
- $.layer({
- shade : ['',false],
- type : 1,
- area : ['315px','auto'],
- offset : ['auto','auto'],
- border : [10 , 0.5 , '#628C1C', true],
- page : {dom : '.layer_notice'},
- close : function(index){
- LAYER.close(index);
- $('.layer_notice').hide();
- }
- });
- });
- $("#demo6").click(function (){
- $.layer({
- type : 1,
- title : ['',false],
- fix : false,
- offset:['50px' , ''],
- area : ['515px','615px'],
- page : {dom : '#tong'}
- });
- $('#tong').live('click',function(){
- var index = LAYER.getIndex(this);
- LAYER.close(index);
- });
- });
- $("#demo7").click(function (){
- $.layer({
- type : 2,
- closeBtn : [0,true],
- iframe : {
- src : 'http://www.baidu.com'
- },
- title : ['' , false],
- area : ['500px','300px'],
- success : function(){ //层加载成功后进行的回调
- LAYER.shift('right-bottom',2000); //浏览器右下角弹出
- }
- });
- });
- $("#demo8").click(function (){
- layer.tips('我爱你,你爱我吗?' , this , 3);
- });
- });
- </script>
- <style type="text/css">
- html, body {
- padding:100px;
- font-family: '微软雅黑';
- font-size: 14px;
- }
- .link{
- margin-right:50px;
- color: #363636;
- text-decoration: none;
- background: none repeat scroll 0 0 #F2F2F2;
- border: 1px solid #AAAAAA;
- display: block;
- float: left;
- height: 30px;
- line-height: 30px;
- margin-right: 10px;
- margin-bottom:50px;
- padding: 0 20px;
- text-align: center;
- }
- .link:hover{
- color:red;
- cursor:pointer;
- }
- </style>
- <a id="demo1" class="link">信息框一 </a>
- <a id="demo2" class="link">信息框二 </a>
- <a id="demo3" class="link">自动消失的信息框 </a>
- <a id="demo4" class="link">询问框 </a>
- <a id="demo5" class="link">页面层一 </a>
- <a id="demo6" class="link">页面层二 </a>
- <a id="demo7" class="link">iframe层 </a><br/><br/><br/>
- <div>
- <a id="demo8" class="link" style="float:left;">itips层 </a>
- </div>
- <div class="layer_notice" style="height:200px;background-color:green;display:none;">大家好哦,独领风骚付款</div>
- <div id="tong" style="display:none;"><img src="p_w_picpaths/tong.jpg" width="300" height="200"/></div>
转载于:https://blog.51cto.com/soukenan/1056064