以下是 对话框-jmodel特效代码 的示例演示效果:
部分效果截图:
HTML代码(jmodal.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JModal Demo</title>
<link rel="Stylesheet" type="text/css" href="css/jquery.jmodal.css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jmodal.js"></script>
<style type="text/css">
body,html
{
font-family:Calibri;
font-size:12px;
height:1000px;
line-height:18px;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('a.fixed').click(function() {
$.fn.jmodal({
data: { innerText: $(this).text() },
title: 'Information',
content: 'I am always fixed in the middle of screen(just scroll)!',
buttonText: { ok: 'Yes,It is.', cancel: 'No' },
fixed: true,
okEvent: function(data, args) {
alert(data.innerText);
}
});
});
$('a.absolute').click(function() {
$.fn.jmodal({
title: 'Information',
content: 'I am a absolute dialog!',
buttonText: { ok: 'Yes,It is.', cancel: 'No' },
okEvent: function(data, args) {
}
});
});
$('a.ajax').click(function() {
$.fn.jmodal({
title: 'Information',
content: function(body) {
body.html('loading...');
body.load('template/msn.htm');
},
buttonText: { ok: 'Yes,It is.', cancel: 'No' },
okEvent: function(data, args) {
}
});
});
var txtInput;
$('a.withtext').click(function() {
$.fn.jmodal({
title: 'input',
content: function(body) {
body.html('<input type="text" id="txtInput" />');
txtInput = $('#txtInput');
},
buttonText: { ok: 'Yes,It is.', cancel: 'No' },
okEvent: function(data, args) {
if($.trim(txtInput.val())==''){
args.isCancelling=true;
alert('required.');
}
else{
args.isCancelling=false;
alert(txtInput.val());
}
}
});
});
})
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" class="fixed" >fixed dialog</a></li>
<li><a href="javascript:void(0)" class="absolute" >absolute dialog</a></li>
<li><a href="javascript:void(0)" class="ajax">ajax dialog</a></li>
<li><a href="javascript:void(0)" class="withtext">with textbox</a></li>
</ul>
<select><option>abc</select>
</body>
</html>
JS代码(jquery.jmodal.js):
/// <reference path="jquery.js"/>/* * jmodal * version:3.0 (05/13/2009) * @ jQuery v1.3.* * * Licensed under the GPL:* http://gplv3.fsf.org * * Copyright 2008,2009 Jericho [ thisnamemeansnothing[at]gmail.com ] **/
$.extend($.fn,{
jmodal:function(setting){
var ps = $.fn.extend({
data:{
}
,marginTop:100,buttonText:{
ok:'Ok',cancel:'Cancel'}
,okEvent:function(e){
}
,width:400,fixed:true,title:'JModal Dialog',content:'This is a jquery plugin!',skinId:'jmodal-main'}
,setting);
var allSel = $('select').hide(),doc = $(document);
ps.docWidth = doc.width();
ps.docHeight = doc.height();
var cache,cacheKey = 'jericho_modal';
if ($('#jmodal-overlay').length == 0){
$('<div id="jmodal-overlay" class="jmodal-overlay"/>\ <div class="jmodal-main" id="jmodal-main" >\ <div class="jmodal-top">\ <div class="jmodal-top-left jmodal-png-fiexed">
</div>\ <div class="jmodal-border-top jmodal-png-fiexed">
</div>\ <div class="jmodal-top-right jmodal-png-fiexed">
</div>\ </div>\ <div class="jmodal-middle">\ <div class="jmodal-border-left jmodal-png-fiexed">
</div>\ <div class="jmodal-middle-content">\ <div class="jmodal-title" />\ <div class="jmodal-content" id="jmodal-container-content" />\ <div class="jmodal-opts">\ <input type="button"/>
<input type="button" />\ </div>\ </div>\ <div class="jmodal-border-right jmodal-png-fiexed">
</div>\ </div>\ <div class="jmodal-bottom">\ <div class="jmodal-bottom-left jmodal-png-fiexed">
</div>\ <div class="jmodal-border-bottom jmodal-png-fiexed">
</div>\ <div class="jmodal-bottom-right jmodal-png-fiexed">
</div>\ </div>\ </div>').appendTo('body');
//$(document.body).find('form:first-child') || $(document.body)}
if (window[cacheKey] == undefined){
cache ={
overlay:$('#jmodal-overlay'),modal:$('#jmodal-main'),body:$('#jmodal-container-content')}
;
cache.title = cache.body.prev();
cache.buttons = cache.body.next().children();
window[cacheKey] = cache;
}
cache = window[cacheKey];
var args ={
hide:function(){
cache.modal.fadeOut();
cache.overlay.hide();
}
,isCancelling:false}
;
if (!cache.overlay.is(':visible')){
cache.overlay.css({
opacity:.4}
);
cache.modal.attr('class',ps.skinId) .css({
position:(ps.fixed ? 'fixed':'absolute'),width:ps.width,left:(ps.docWidth - ps.width) / 2,top:(ps.marginTop + document.documentElement.scrollTop)}
).fadeIn();
}
cache.title.html(ps.title);
//OK BUTTON cache.buttons.eq(0) .val(ps.buttonText.ok) .unbind('click') .click(function(e){
allSel.show();
ps.okEvent(ps.data,args);
if (!args.isCancelling){
args.hide();
}
}
) //CANCEL BUTTON .next() .val(ps.buttonText.cancel) .one('click',function(){
args.hide();
allSel.show();
}
);
if (typeof ps.content == 'string'){
$('#jmodal-container-content').html(ps.content);
}
if (typeof ps.content == 'function'){
ps.content(cache.body);
}
}
}
)CSS代码(jquery.jmodal.css):
.jmodal-overlay{background-color:#888;position:absolute;left:0;top:0;z-index:200;right:0;bottom:0;display:none;}
/* skinId:jmodal-main */
.jmodal-main{left:0;padding:0;margin:0;top:0;position:absolute;z-index:201;overflow:visible;}
.jmodal-main .jmodal-top{height:10px;position:relative;width:100%;}
.jmodal-main .jmodal-top div{height:10px;position:absolute;top:0;}
.jmodal-main .jmodal-top-left{width:10px;left:0;background:url(../images/jmodal/dialog_top_left.png) center bottom no-repeat;}
.jmodal-main .jmodal-top-right{width:10px;right:0;background:url(../images/jmodal/dialog_top_right.png) center bottom no-repeat;}
.jmodal-main .jmodal-border-top{left:10px;right:10px;background:url(../images/jmodal/dialog_border.png) center bottom repeat-x;}
.jmodal-main .jmodal-middle{position:relative;width:100%;height:auto;left:0;top:0;}
.jmodal-main .jmodal-border-left{background:url(../images/jmodal/dialog_border.png) right bottom repeat-y;width:10px;left:0;position:absolute;top:0;bottom:0;}
.jmodal-main .jmodal-border-right{width:10px;right:0;position:absolute;top:0;bottom:0;background:url(../images/jmodal/dialog_border.png) left bottom repeat-y;}
.jmodal-main .jmodal-middle-content{padding:0 10px;}
.jmodal-main .jmodal-title{height:30px;background-color:#87CEEB;font-weight:bold;text-indent:10px;color:#fff;letter-spacing:2px;line-height:30px;border-bottom:groove 2px #4682B4;}
.jmodal-main .jmodal-content{height:auto;background-color:#F5FFFA;padding:20px 10px;}
.jmodal-main .jmodal-opts{background-color:#eee;border-top:1px solid #ccc;padding:5px;text-align:right;}
.jmodal-main .jmodal-opts input{background-color:#87CEEB;border-color:#B8D4E8 #124680 #124680 #B8D4E8;border-style:solid;border-width:1px;color:#008080;cursor:pointer;font-size:12px;padding:2px 10px;text-align:center;margin-right:5px;font-family:Calibri;}
/* ie png fixed */
.jmodal-png-fiexed{filter:alpha(opacity=50);}
.jmodal-main .jmodal-bottom{height:10px;position:relative;width:100%;}
.jmodal-main .jmodal-bottom div{position:absolute;top:0;height:10px;}
.jmodal-main .jmodal-border-bottom{left:10px;right:10px;background:url(../images/jmodal/dialog_border.png) center top repeat-x;}
.jmodal-main .jmodal-bottom-left{width:10px;left:0;background:url(../images/jmodal/dialog_bottom_left.png) center top no-repeat;}
.jmodal-main .jmodal-bottom-right{width:10px;right:0;background:url(../images/jmodal/dialog_bottom_right.png) center top no-repeat;}
分享到QQ
分享到微博
微信扫一扫
