本文章是利用了jquery dialog对话框插件实例弹层效果哦,dialog弹出一个iframe对话框,好了下面我们先来看看实例,然后再告诉你如何实例dialog对话框效果。
(function ($) {
$.fn.openwidow = function (options) {
var divid = "dialog" + math.round(math.random() * 100);
var settings = {
id: divid,
width: 300,
height: 200,
modal: true,
buttons: {
},
show: "explode",
hide: "highlight",
title: "提示",
url: "/test.asp教程x",
close: function () {
$("#" + this.id).remove();
//debugger
if (document.getelementbyid(this.id))
document.body.removechild(document.getelementbyid(this.id));
}
};
if (options) {
$.extend(settings, options);
}
$("body").append('<div id="' + settings.id + '" title="dialog title"><p class="loading"></p></div>');
// dialog
$('#' + settings.id).dialog({
autoopen: false,
title: settings.title,
width: settings.width,
height: settings.height,
modal: true,
bgiframe: true,
show: settings.show,
hide: settings.hide,
buttons: settings.buttons,
close: settings.close,
open: function () {
$("#" + settings.id).html('<iframe src="' + settings.url + '" frameborder="0" height="100%" width="100%" id="dialogframe" scrolling="auto"></iframe>');
},
resizestop: function () {
$("#dialogframe").css教程("width", parseint($(this).css("width")) - 5);
$("#dialogframe").css("height", parseint($(this).css("height")) - 5);
}
});
$('#' + settings.id).dialog("open");
return this;
};
})(jquery);
下面来看看
原理很简单,通过js动态构建一个div层,将其插入到body中,然后通过调整position的css属性为absolute或fixed,使其脱离原来的文档流的位置。再通过适当的加工美化就成了。
<!-- 背景遮盖层 -->
<div class="dialog-overlay"></div>
<!-- 对话框 -->
<div class="dialog">
<div class="bar">
<span class="title">标题</span>
<a class="close">[关闭]</a>
</div>
<div class="content">内容部分</div>
</div>
这就是两个div层的结构,第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个css类,这样便于自定义其外观。
一些基本功能的实现
移动框体
只要在mousemove事件中,计算两次移动鼠标位置的差值,再加上被移动框的原始的top,left,就是对话框新的位置。mousemove事件只需要在鼠标按下标题栏的时候才需要触发,所以只有在触发标题栏的mousedown事件时才绑定mousemove事件,而鼠标释放时也同时解除mousemove的绑定。
mousemove和解除绑定mousemove事件的mouseup却没有绑定到标题栏上,而是document上,之所以这样,是因为有时鼠标移动过快时,会移出标题栏范围,此时若是绑定到标题栏上的事件就会失效,而绑定到document就不会。
var mouse={x:0,y:0};
function movedialog(event)
{
var e = window.event || event;
var top = parseint(dialog.css('top')) + (e.clienty - mouse.y);
var left = parseint(dialog.css('left')) + (e.clientx - mouse.x);
dialog.css({top:top,left:left});
mouse.x = e.clientx;
mouse.y = e.clienty;
};
dialog.find('.bar').mousedown(function(event){
var e = window.event || event;
mouse.x = e.clientx;
mouse.y = e.clienty;
$(document).bind('mousemove',movedialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', movedialog);
});
定位
居中定位很容易实现,ie下的clientwidth, offsetwidth等一系列属性和其它浏览器好像有点不一样,所以不要用这些属性,可以直接用jquery下的width()函数:
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css({top:top,left:left});
ie6下并没有fixed模式,但是能通过window.onscroll事件模拟实现:
// top 对话框到可视区域顶部位置的距离。
var top = parseint(dialog.css('top')) - $(document).scrolltop();
var left = parseint(dialog.css('left')) - $(document).scrollleft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrolltop() + top,'left':$(document).scrollleft() + left});
});
分享到:
相关推荐
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
jquery dialog对话框插件制作蓝色的弹出消息对话框代码
简约扁平风格jQuery确认对话框插件,方便实用,可收藏已备后用
jquery dialog css3弹出对话框插件实例 jquery dialog css3弹出对话框插件实例
jQuery扁平风格对话框插件Dialogbox是一款简约的对话框界面,多种对话框状态,错误提示,成功提示,警告提示,确认提示,Prompt对话框等,支持回调。
jQuery通用dialog对话框 popup提示信息窗口插件demo
dialog对话框插件鼠标点击弹出可拖动对话框代码 dialog对话框插件鼠标点击弹出可拖动对话框代码 dialog对话框插件鼠标点击弹出可拖动对话框代码
主要介绍了jQuery Dialog对话框事件用法,结合实例形式分析了Dialog对话框实现的静态提示类对话框、动态提示类对话框以及遮罩类对话框的概念、使用方法与相关注意事项,需要的朋友可以参考下
Android dialog对话框用法实例,在dialog上显示一些按钮,并赋值,演示动作脚本的过程,教你android对话框的使用。
原生js Dialog对话框插件制作19种对话框弹出层拖动
Zebra_Dialog是一款简单实用的jQuery模态对话框插件。用它可以替代原生JavaScript的警告框和确认框,也可以用它来制作消息提示框。它兼容IE6+浏览器,支持Ajax加载内容和iFrame框架等。
简单的jquery dialog实现插件,使用简单,自行修改样式
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
Zebra_Dialog是一款简单实用的jQuery模态对话框插件。用它可以替代原生JavaScript的警告框和确认框,也可以用它来制作消息提示框。它兼容IE6 浏览器,支持Ajax加载内容和iFrame框架等。
jQuery对话框插件dialogBox,简单实用的jquery对话框插件,配合css3效果,视觉效果完美呈现,支持模拟confirm对话框、alert提示框等,可自定义对话框标题、内容、尺寸、效果等。
通用jQuery对话框dialog或popup弹出层或提示窗口插件
插件描述:原生jQuery对话框插件dialogBox,提供初学者学习,9种类型的对话框 参考示例:http://www.jq22.com/jquery-info4822
18、jQuery弹出对话框jQuery插件Dialog