bootstrap3.x

Fixalert

lopo1983 发表了文章 • 0 个评论 • 1750 次浏览 • 2016-07-28 15:25 • 来自相关话题

.alertbox {
position: fixed;
max-width: 480px;
min-width: 100px;
width: auto;
height: auto;
overflow: hidden;
.alert {
.unbdr;
.close {
margin-left: 15px;
}
}
&[data-pos="br"] {
right: 5px;
bottom: 0;
}
&[data-pos="tr"] {
right: 5px;
top: 100px;
}
a {
display: block;
cursor: pointer;
&:hover {
color: inherit;
}
}
}less?function fixAlert(a, b, c, d) {
//a 位置 0 右下 1 右上 | b 类型 0警告 1 错误 2正确 | c 内容 | d 如果有者为url
$('.alertbox').remove();
var pos, type;
var temp = '';
var tempChild = '';
if (a == 0) {
pos = 'br';
} else {
pos = 'tr';
};
if (b == 0) {
type = "warning";
} else if (b == 1) {
type = "danger";
} else {
type = "success";
};
if (d == undefined) {
d = "javascript:;"
};
temp += '<div class="alertbox" data-pos="' + pos + '"></a>';
$('body').append(temp);
tempChild += '<a class="alert ' + type + '" href="' + d + '"><button type="button" class="close" data-dismiss="alert"><span>×</span></button>' + c + '</a>';
$('.alertbox').append(tempChild);
$('.alert').on('closed.bs.alert', function() {
$('.alertbox').remove();
});
};js
?
fixAlert(1,0,'警告的内容','http://www.baidu.com') 查看全部

.alertbox {

    position: fixed;

    max-width: 480px;

    min-width: 100px;

    width: auto;

    height: auto;

    overflow: hidden;

    .alert {

        .unbdr;

        .close {

            margin-left: 15px;

        }

    }

    &[data-pos="br"] {

        right: 5px;

        bottom: 0;

    }

    &[data-pos="tr"] {

        right: 5px;

        top: 100px;

    }

    a {

        display: block;

        cursor: pointer;

        &:hover {

            color: inherit;

        }

    }

}

less?

function fixAlert(a, b, c, d) {

	//a 位置 0 右下 1 右上  | b 类型  0警告 1 错误 2正确     |   c 内容    |  d 如果有 者为url

	$('.alertbox').remove();

	var pos, type;

	var temp = '';

	var tempChild = '';

	if (a == 0) {

		pos = 'br';

	} else {

		pos = 'tr';

	};

	if (b == 0) {

		type = "warning";

	} else if (b == 1) {

		type = "danger";

	} else {

		type = "success";

	};

	if (d == undefined) {

		d = "javascript:;"

	};

	temp += '<div class="alertbox" data-pos="' + pos + '"></a>';

	$('body').append(temp);

	tempChild += '<a class="alert ' + type + '"  href="' + d + '"><button type="button" class="close" data-dismiss="alert"><span>×</span></button>' + c + '</a>';

	$('.alertbox').append(tempChild);

	$('.alert').on('closed.bs.alert', function() {

		$('.alertbox').remove();

	});

};

js
?

fixAlert(1,0,'警告的内容','http://www.baidu.com')

mAlert

lopo1983 发表了文章 • 0 个评论 • 1596 次浏览 • 2016-07-28 15:23 • 来自相关话题

//mAlert使用方法
//1 警告，2错误，3成功，4无状态（c,a,b）c 状态 a 标题 b 内容 c为必填;
?
<a class="btn btn-success" onclick="mAlert(3,'成功的提示文字','成功')">成功</a>function mAlert(c, a, b, u) {
$('.modal').remove();
var m = '',
temp = '';
var mclass, micon;
var $md = $('#alertModal');
if (c == 1) {
mclass = ' warning';
micon = 'icon-war';
} else if (c == 2) {
mclass = ' danger';
micon = 'icon-erro';
} else if (c == 3) {
mclass = ' success';
micon = 'icon-suc';
} else if (c == undefined || c == 0) {
micon = 'icon-info'
};
temp += '<div class="modal fade' + mclass + '" id="alertModal" data-keyboard="false" tabindex="-1" role="dialog">';
temp += '<div class="modal-dialog modal-sm"><div class="modal-content">';
temp += '<div class="modal-body"><a class="close"></a><div class="media"><div class="media-left"><span class="iconplus ' + micon + '"></span></div>';
temp += '<div class="media-body media-middle"><h4>' + b + '</h4><p class="text-justify">' + a + '</p></div></div></div>';
temp += '<div class="modal-footer"><p><a class="btn btn-default btn-sm pull-right" data-dismiss="modal">确定</a></p></div>';
temp += '</div></div></div>';
$('body').append(temp);
$('#alertModal').modal({
show: 'true',
backdrop: 'static',
});
$('#alertModal').on('hidden.bs.modal', u)
}#alertModal {
.modal-header {
padding-top: 10px;
padding-bottom: 10px;
}
.modal-title {
color: @cwh;
margin: 0;
}
.modal-sm {
width: 400px;
}
.iconplus {
font-size: 96px;
}
.modal-body {
.btn {
padding-left: 25px;
padding-right: 25px;
}
p {
margin-bottom: 0;
}
.icon-erro {
color: @cre;
}
.icon-war {
color: @cye*0.9;
}
.icon-suc {
color: @cgr;
}
}
} 查看全部

//mAlert使用方法
//1 警告，2错误，3成功，4无状态（c,a,b）c 状态 a 标题 b 内容 c为必填;
?
<a class="btn btn-success" onclick="mAlert(3,'成功的提示文字','成功')">成功</a>

function mAlert(c, a, b, u) {

	$('.modal').remove();

	var m = '',

		temp = '';

	var mclass, micon;

	var $md = $('#alertModal');

	if (c == 1) {

		mclass = ' warning';

		micon = 'icon-war';

	} else if (c == 2) {

		mclass = ' danger';

		micon = 'icon-erro';

	} else if (c == 3) {

		mclass = ' success';

		micon = 'icon-suc';

	} else if (c == undefined || c == 0) {

		micon = 'icon-info'

	};

	temp += '<div class="modal fade' + mclass + '" id="alertModal" data-keyboard="false" tabindex="-1" role="dialog">';

	temp += '<div class="modal-dialog modal-sm"><div class="modal-content">';

	temp += '<div class="modal-body"><a class="close"></a><div class="media"><div class="media-left"><span class="iconplus ' + micon + '"></span></div>';

	temp += '<div class="media-body  media-middle"><h4>' + b + '</h4><p class="text-justify">' + a + '</p></div></div></div>';

	temp += '<div class="modal-footer"><p><a class="btn btn-default btn-sm pull-right" data-dismiss="modal">确定</a></p></div>';

	temp += '</div></div></div>';

	$('body').append(temp);

	$('#alertModal').modal({

		show: 'true',

		backdrop: 'static',

	});

	$('#alertModal').on('hidden.bs.modal', u)

}

#alertModal {

    .modal-header {

        padding-top: 10px;

        padding-bottom: 10px;

    }

    .modal-title {

        color: @cwh;

        margin: 0;

    }

    .modal-sm {

        width: 400px;

    }

    .iconplus {

        font-size: 96px;

    }

    .modal-body {

        .btn {

            padding-left: 25px;

            padding-right: 25px;

        }

        p {

            margin-bottom: 0;

        }

        .icon-erro {

            color: @cre;

        }

        .icon-war {

            color: @cye*0.9;

        }

        .icon-suc {

            color: @cgr;

        }

    }

}

bsfanslib 持续更新中

lopo1983 发表了文章 • 0 个评论 • 1384 次浏览 • 2016-07-08 14:10 • 来自相关话题

基于 bootstrap 3.x 的扩展库
终于上线了目前持续书写中！
项目连接地址项目地址coding.io

modal点击时 body变窄的解决办法

lopo1983 发表了文章 • 0 个评论 • 1852 次浏览 • 2016-03-13 17:02 • 来自相关话题

问题描述
3.x的body在改版为了有更好的UX效果当modal-body 内容超长的时候滚动鼠标即可直接滚动不同于2.x的效果，须在modal-body上滚动鼠标，但是在做某些页面的时候body 的内容不超过100vh 就会出现强制滚动条，而这样的效果在某些时候回引起一些不必要的小麻烦也就是页面重绘。
?
查看bs的源码后发现其在body中增加了一个class modal-open 和通过js 写入的padding-right 17px
从这里下手即可解决
?
解决办法1 简单暴力
修改js 源码
打开js源码搜素 modal 后再搜索 padding 就会发现一个
c.prototype.setScrollbar = function() {
var a = parseInt(this.$body.css("padding-right") || 0, 10);
this.originalBodyPad = document.body.style.paddingRight || "", this.bodyIsOverflowing && this.$body.css("padding-right", a + this.scrollbarWidth)
}注释掉这段js 即可完成；
[b]解决办法2 修改css[/b]
祭出css 大宝剑!important

增加如下css.modal-open {
overflow: initial !important;
}
.body{
adding-right: 0px !important;
}
?
? 查看全部

问题描述
3.x的body在改版为了有更好的UX效果当modal-body 内容超长的时候滚动鼠标即可直接滚动不同于2.x的效果，须在modal-body上滚动鼠标，但是在做某些页面的时候body 的内容不超过100vh 就会出现强制滚动条，而这样的效果在某些时候回引起一些不必要的小麻烦也就是页面重绘。
?
查看bs的源码后发现其在body中增加了一个class modal-open 和通过js 写入的padding-right 17px
从这里下手即可解决
?
解决办法1 简单暴力
修改js 源码
打开js源码搜素 modal 后再搜索 padding 就会发现一个

c.prototype.setScrollbar = function() {

		var a = parseInt(this.$body.css("padding-right") || 0, 10);

		this.originalBodyPad = document.body.style.paddingRight || "", this.bodyIsOverflowing && this.$body.css("padding-right", a + this.scrollbarWidth)

}

注释掉这段js 即可完成；

[b]解决办法2 修改css[/b]

祭出css 大宝剑!important



增加如下css

.modal-open {

    overflow: initial !important;

}

.body{

    adding-right: 0px !important;

}

?

datetimepicker bs中错位问题

lopo1983 发表了文章 • 0 个评论 • 2064 次浏览 • 2016-02-26 10:17 • 来自相关话题

解决方式如同：

datepicker position #363

但是这个文章并没有交代自己的版本号，而且我查找js源文件，也没有找到对应的字眼：507行、scrollTop等。

我个人是2015-11-16在github上下载的master分支：https://github.com/smalot/bootstrap-datetimepicker

根据更新日志，理论上应该是最新的版本?Minor release 2.3.5：Minor release 2.3.5

我找到的位置是在533行

现总结如下：

如果是2.3.5版本，尝试修改?bootstrap-datetimepicker.js?文件?533行?：top = top - containerOffset.top;//改为top = top// - containerOffset.top;
如果没有找到这一行，那么可能是旧版本，尝试在507~520行之间修改：top = top + document.body.scrollTop//改为top = top //+ document.body.scrollTop
如果用的min文件，那么也要相应改一下。讲到这里，再罗嗦一句：

min不知道用什么压缩工具的（估计是google压缩），变量名都改了，查找如下内容：

m=m-k.top;

把 "-k.top"去掉就好。

如果没有找到这个，搜索?top-left 这个字眼，翻一下后面，就可以看到了。

---------------------------------

更新：

俺发现不是这样的捏，min文件里面居然有+document.body.scrollTop这个字眼，果断去掉就好了。

? 查看全部

bootstrap tab 问题集锦

lopo1983 发表了文章 • 0 个评论 • 1728 次浏览 • 2016-02-26 10:07 • 来自相关话题

1.Q:在tab中使用canvas 图标切换时canvas不能正常显示（echarts）本小结由四川-逮猫高手在成都提供 ?
?A：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
myChart1.resize();
myChart2.resize();
myChart3.resize();
})?
?
? 查看全部

1.Q:在tab中使用canvas 图标切换时canvas不能正常显示（echarts）本小结由四川-逮猫高手在成都提供 ?
?A：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    myChart1.resize();

     myChart2.resize();

     myChart3.resize();

})

?
?
?

bootsrap 扩展集合

lopo1983 发表了文章 • 0 个评论 • 2043 次浏览 • 2016-02-17 11:09 • 来自相关话题

欢迎大家提交
我也会不断跟进?
提交格式如下：
?
扩展插件名称：
扩展插件用途：
扩展插件地址：
扩展插件截图：（如果有而且方便）
..................................................................................................... 查看全部

bootstrap modal 相关问题集锦！

lopo1983 发表了文章 • 0 个评论 • 2274 次浏览 • 2016-01-13 11:35 • 来自相关话题

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？
源文件库是否与API 一致插件加载过多冲突JQ版本过低？？（本人未作验证真实性有待考究）
Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})方法2data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)示例如下:
html<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>js $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
}); 查看全部

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？

源文件库是否与API 一致
插件加载过多冲突
JQ版本过低？？（本人未作验证真实性有待考究）

Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1

$('#myModal').modal({

  keyboard: false;//禁用键盘ESC 关闭

  backdrop: false;//禁用非modal外半透背景点击关闭

})

方法2

data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:

container

String. Default: “body”

Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)

示例如下:
html

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>

                <div class="modal-body">

                    <form>

                        <div class="form-group" style="position:relative;">

                            <label for="exampleInputEmail1">Datetimepicker</label>

                            <input type="text" class="form-control" id="datetimepicker">

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

js

    $(function() {

        $('#datetimepicker').datetimepicker({

        	format: 'yyyy-mm-dd hh:ii',

        	container : '#myModal .form-group'

        });

    });

通知设置新通知