Skip to content

aiv367/bootstrap4.pop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bootstrap4.pop

基于bootstrap4,封装的消息组件 dialog, alert, confirm, prompt, notice,支持鼠标及手势拖拽 (surface笔记本)

更新

  • V1.1 [2021/01/01]

    • 调整了代码
    • 修复了触控模式下无法关闭对话框的bug
  • V1.0.0 [2019/06/05]

    • 提交代码

依赖

导入

<script src="libs/jquery/jquery.js"></script>

<link rel="stylesheet" href="libs/bootstrap-4.5.0-dist/css/bootstrap.css">
<script src="libs/bootstrap-4.5.0-dist/js/bootstrap.js"></script>

<link rel="stylesheet" href="../bs4pop.css">
<script src="../bs4pop.js"></script>

说明

let dialog = bs4pop.dialog(opts);

//opts 参数说明
opts = {
	id: '',//'#xxx,对话框ID,可以不填
	title: '', //标题
	content: '', //可以是 string、element,$object
	className: '', //自定义样式
	width: 500,
	height: '',
	target: 'body', //在什么dom内创建 dialog

	closeBtn: true, //是否有关闭按钮
	hideRemove: true,//关闭时移除dom
	escape: true, //按 Esc 键关闭对话框
	autoFocus: true,//初始化时自动获得焦点
	show: true,//是否在一开始时就显示对话框
	backdrop: true,//模态背景 true: 显示模态,false: 没有模态,'static': 显示模态,单击模态不关闭对话框
	btns: [], //footer按钮 [{label: 'Button',	className: 'btn-primary',onClick(cb){}}]
	drag: true,//是否启用拖拽

	onShowStart() { },
	onShowEnd() { },
	onHideStart() { },
	onHideEnd() { },
	onClose() { },
	onDragStart() { },
	onDragEnd() { },
	onDrag() { }
}

// dialog返回值说明
{
	$el: $el,
	show() {},
	hide() {},
	toggle() {},
	destory() {}
}
// 其它方法
bs4php.dialog(opts); //对话框
bs4pop.removeAll(); //移除全部对话框
bs4pop.alert(content, cb, opts); //创建个简易提示框
bs4pop.confirm(content, cb, opts); //创建选择框
bs4pop.prompt(content, value, cb, opts); //创建输入框
bs4pop.notice(content, opts); //创建提示消息

// 各个方法总的 opts 参数说明参考 dialog 的 opts

About

基于bootstrap4,封装的消息组件 dialog,alert,confirm,input,success,error,notice。并且对话框支持鼠标,手指拖拽

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published