基于jQuery实现轻量级弹出层插件代码



46 182 61



特效描述:基于jQuery实现 轻量级弹出层插件,基于jQuery实现轻量级弹出层插件代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="fbmodal.css" />
<link rel="stylesheet" type="text/css" href="fbmodal.css" />

2. 引入JS

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.fbmodel.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.fbmodel.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title></title>
<script type="text/javascript">
$(function(){
/*Modal with no options*/	
    $("#open2").click( function(){
        $(".test").fbmodal();
    }); 	
/*Modal with options*/	
    $("#open").click( function(){
        $(".test").fbmodal({
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    }); 
/*Using an id to close the Modal*/
    $("#close").click( function(){
        $(".test").fbmodal({close:true});
    });	
    $("#open3").click( function(){
        $(".test").fbmodal({
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.35,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    });
    $("#open4").click( function(){
        $(".test").fbmodal({
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "10%",
       modalwidth: "400" 
        }); 
    }); 	
    $("#open5").click( function(){
        $(".test").fbmodal({
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "800" 
        }); 
    }); 
    $("#open6").click( function(){
        $(".test").fbmodal({
       okaybutton: false,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    }); 
    $("#open7").click( function(){
        $(".test").fbmodal({
       okaybutton: true,
     cancelbutton: false,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    }); 
    $("#open8").click( function(){
        $(".test").fbmodal({
             okay: "点我,点我",
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    });
    $("#open9").click( function(){
        $(".test").fbmodal({
            title: "FaceBook Modal Demo",  
           cancel: "点我删除",
       okaybutton: true,
     cancelbutton: true,
          buttons: true,
          opacity: 0.0,
	      fadeout: true,
     overlayclose: true,
         modaltop: "30%",
       modalwidth: "400" 
        }); 
    }); 
	/*Using a callback function*/
    $("#open10").click( function(){
        $(".test").fbmodal({
            modalwidth: "400"}
        	,function(callback){
             if(callback == 1){
                alert("你点了确定按钮");
            }
			if(callback == 2){
                alert("你点了取消按钮");
            }
        });  
    });
});	
</script>
<style>
*{margin:0;padding:0;list-style:none;border:none;}
a {
	color: #555;
}
a:hover {
	text-decoration: underline;
}
#content{text-align:center;font-size:16px;margin-top:10px;font-family:'microsoft yahei';}
</style>
</head>
<body style="height: 800px;">
<div id="content">
<div class="test"><p style="line-height:2;text-indent:1.2em;">51前端 - 让开发更简单 <a href="javascript: vaoid()" id="close">关闭</a></p></div>
<b>Demo:</b> <a href="javascript:void()" id="open">Modal 1</a><br />
Normal modal.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open2">Modal 2</a><br />
With no width set.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open3">Modal 3</a><br />
Opacity set 35%.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open4">Modal 4</a><br />
10% from top of the page.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open5">Modal 5</a><br />
Width of 800px<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open6">Modal 6</a><br />
No okay button.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open7">Modal 7</a><br />
No cancel button.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open8">Modal 8</a><br />
Custom okay button.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open9">Modal 9</a><br />
Custon cancel button.<br />
<br />
<b>Demo:</b> <a href="javascript:void()" id="open10">Modal 10</a><br />
Using the callback function.<br />
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 浮动菜单 浮动导航 文字提示框 提示文字 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到