bootstrap jquery popup弹出层悬浮插件webui-popover_JQuery dialog实例
2014-09-13 20:39:10  By: dwtedx

一款使用 bootstrap 和webui-popover 的弹出层 JQuery 插件、非常美观、可自定义弹出的位置

非常方便、以下我把使用中一些常用的配置参数贴出来供大家参考

1、animation true/false 是否动画

2、placement ´right´/´left´/top/bottom/function(){return ´right´} 弹出提示的位置

3、selector 目标对象

4、trigger ´hover´/´click´... 触发方式

5、title 标题 如果元素没有指定data-original-title属性,则使用这个默认值

6、content 内容 如果元素没有指定data-content属性,则使用这个默认值

7、delay 显示和隐藏的时间 20/{show:200,hide:300}

先来看一下效果图吧

下面是通过 JavaScript 调用的代码

$(´a.show-pop´).webuiPopover(´destroy´).webuiPopover(settings);
var tableContent = $(´#tableContent´).html(),
	tableSettings = {content:tableContent,
						width:500
					};
$(´a.show-pop-table´).webuiPopover(´destroy´)
	.webuiPopover($.extend({},settings,tableSettings));

var listContent = $(´#listContent´).html(),
	listSettings = {content:listContent,
						title:´´,
						padding:false
					};
$(´a.show-pop-list´).webuiPopover(´destroy´)
	.webuiPopover($.extend({},settings,listSettings));

var largeContent = $(´#largeContent´).html(),
	largeSettings = {content:largeContent,
						width:400,
						height:350,
						closeable:true
					};
$(´a.show-pop-large´).webuiPopover(´destroy´)
	.webuiPopover($.extend({},settings,largeSettings));
var iframeSettings = {
	width:500,
	height:350,
	closeable:true,
	padding:false,
	type:´iframe´,
	url:´http://getbootstrap.com´
};
$(´a.show-pop-iframe´).webuiPopover(´destroy´)
	.webuiPopover($.extend({},settings,iframeSettings));
$(´#resetLogs´).on(´click´,function(e){
	e.preventDefault();
	$(´#eventLogs´).text(´´);
});

好了、这样一个简单的 POP UP 就做发了、希望对一些哥们有帮助

下面是源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1jGj3AnW 密码: u993

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+