推薦幾款好用的模態框附帶教程
阿新 • • 發佈:2019-02-11
一、layer彈出元件
下載地址:http://www.chtml.cn/topic/show/25
如何安裝:
1.下載完畢後把layer資料夾拿出放到你的工程目錄下thinkphp請放在指定的公共目錄下,以便前後臺使用。
2.layer的彈出框引用檔案
<script src="/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
3.layer框架的使用
如圖的html程式碼:
<h2 style="padding-bottom:20px;" >按鈕模組:彈出框</h2>
<div id="button">
<a href="javascript:;" id="tanchu">資訊</a>
<a href="javascript:;" id="xunwen">詢問層</a>
<a href="javascript:;" id="tishi">提示層</a>
<a href="javascript:;" id="buhuo">捕獲頁</a>
<a href="javascript:;" id="ymc">頁面層</a>
<a href="javascript:;" id="zdyy">自定義頁</a>
<a href="javascript:;" id="jzc">載入層</a>
<a href="javascript:;" id="load">loading層</a>
</div>
layer的js控制程式碼:
//關於
$('#about').on('click', function (){
layer.alert(layer.v + ' - 賢心出品 sentsin.com');
});
$("#tanchu").click(function(){
//墨綠深藍風
layer.alert('墨綠風格,點選確認看深藍', {
skin: 'layui-layer-molv' //樣式類名
,closeBtn: 0
}, function(){
layer.alert('偶吧深藍style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,shift: 4 //動畫型別
});
});
})
$("#xunwen").click(function(){
//詢問框
layer.confirm('您是如何看待前端開發?', {
btn: ['重要','奇葩'] //按鈕
}, function(){
layer.msg('的確很重要', {icon: 1});
}, function(){
layer.msg('也可以這樣', {
time: 20000, //20s後自動關閉
btn: ['明白了', '知道了']
});
});
})
$("#tishi").click(function(){
//提示層
layer.msg('玩命提示中');
})
$("#buhuo").click(function(){
//捕獲頁
layer.open({
type: 1,
shade: false,
title: false, //不顯示標題
content: $('.layer_notice'), //捕獲的元素
cancel: function(index){
layer.close(index);
this.content.hide();
layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', {time: 5000, icon:6});
}
});
})
$("#ymc").click(function(){
//頁面層
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['420px', '240px'], //寬高
content: 'html內容'
});
})
$("#zdyy").click(function(){
//頁面層
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上邊框
area: ['420px', '240px'], //寬高
content: 'html內容'
});
})
$("#jzc").click(function(){
var index = layer.load(0, {shade: false}); //0代表載入的風格,支援0-2
});
$("#load").click(function(){
//loading層
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
})
<script src="/1.11.1/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/bootbox.js"></script>
html頁面模態框控制程式碼:
<a href="javascript:;" val="" class="del"></a>
js控制程式碼
$(".del").click(function(){
var url = $(this).attr('val');
bootbox.confirm({
title: "系統提示",
message: "是否要該文章?",
callback:function(result){
if(result){
}
},
buttons: {
"cancel" : {"label" : "取消"},
"confirm" : {
"label" : "確定",
"className" : "btn-danger"
}
}
});
});
bootstrap.min.js
html程式碼:
演示模態框
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
大小提示模態框
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>