Facebook風格jQuery自定義彈出層對話框插件



108 430 144



特效描述:Facebook風格 jQuery 自定義彈出層 對話框插件,Facebook風格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>Facebook風格jQuery自定義彈出層對話框插件</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;">Facebook風格jQuery自定義彈出層對話框插件
  <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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表