加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap模态框二次封装

发布时间:2020-12-17 20:45:56 所属栏目:安全 来源:网络整理
导读:方便工作需要,对于模态框二次封装,可拖动;15种动画效果,先看效果图; Demo请看留言第一条; div class="panel panel-default" div class="panel-body" button class="btn btn-info" type="button"提示信息/button button class="btn btn-warning" type="bu
方便工作需要,对于模态框二次封装,可拖动;15种动画效果,先看效果图;
Demo请看留言第一条;





<div class="panel panel-default">
    <div class="panel-body">
        <button class="btn btn-info" type="button">提示信息</button>
        <button class="btn btn-warning" type="button">警告信息</button>
        <button class="btn btn-success" type="button">成功信息</button>
        <button class="btn btn-danger" type="button">错误信息</button>
        <button class="btn btn-primary" type="button">询问信息</button>
        <button class="btn btn-default" type="button">自动关闭</button>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-body">
        <button class="btn btn-success btn-sm" id="test1">
            FlipVertical
        </button>
        <button class="btn btn-default btn-sm" id="test3">
            SlideBottomContainer
        </button>
        <button class="btn btn-default btn-sm" id="test4">
            SlipTopContainer
        </button>
        <button class="btn btn-default btn-sm" id="test5">
            SlideRightContainer
        </button>
        <button class="btn btn-default btn-sm" id="test6">
            RotateBottom
        </button>

        <button class="btn btn-default btn-sm" id="test7">
            Blur
        </button>
        <button class="btn btn-default btn-sm" id="test8">
            RotateLeft
        </button>
        <button class="btn btn-default btn-sm" id="test9">
            Sign
        </button>
        <button class="btn btn-default btn-sm" id="test10">
            Fall
        </button>
        <button class="btn btn-default btn-sm" id="test11">
            Slit
        </button>
        <button class="btn btn-default btn-sm" id="test12">
            Newspaper
        </button>
        <button class="btn btn-default btn-sm" id="test13">
            SuperScaled
        </button>
        <button class="btn btn-default btn-sm" id="test14">
            SideFall
        </button>
        <button class="btn btn-warning btn-sm dialog" id="test15" data-title="外部页面" data-animation="ShowModalAnimation.FlipVertical"
                data-external=true
                data-onload="javascript: function(){  alert(‘测试‘)}" data-size="modal-full" data-content="http://blog.51cto.com/317057112">
            iframe页面
        </button>

        <button class="btn default btn-sm" id="test16">
            SideFall
        </button>
    </div>
</div>

<script>
$(".dialog").dailog();
$("#test1").dailog({
id: "test222",//ID
title: ‘测试1‘,//窗体标题
animation: ShowModalAnimation.FlipVertical,
content: ‘<button class="btn btn-primary btn-lg" id="test2">开始演示模态框</button><script>$("#test2").dailog({id: "test1111",title:"测试2",animation: ShowModalAnimation.FlipHorizontal,content: "<p>我是测试窗口2</p>",size: ModalSize.sm,});‘,
size: ModalSize.lg,
});
$("#test3").dailog({
id: "test111",//ID
title: ‘测试2‘,//窗体标题
ico: ‘<i class="fa fa-fw fa-commenting-o"></i> ‘,
animation: ShowModalAnimation.SlideBottomContainer,
content: ‘<p>测试2</p>‘,
size: ModalSize.sm,
openEvent: function () {
alert("打开窗口");
},
closeEvent: function () {
alert("关闭窗口")
}
})
$("#test4").dailog({
title: ‘测试4‘,//窗体标题
animation: ShowModalAnimation.SlipTopContainer,
content: "<p>我是测试窗口2</p>",

})
$("#test5").dailog({
    title: ‘测试5‘,//窗体标题
    animation: ShowModalAnimation.SlideRightContainer,})
$("#test6").dailog({
    title: ‘测试6‘,//窗体标题
    animation: ShowModalAnimation.RotateBottom,})
$("#test7").dailog({
    title: ‘测试7‘,//窗体标题
    animation: ShowModalAnimation.Blur,})
$("#test8").dailog({
    title: ‘测试8‘,//窗体标题
    animation: ShowModalAnimation.RotateLeft,})
$("#test9").dailog({
    title: ‘测试9‘,//窗体标题:
    animation: ShowModalAnimation.Sign,content: "<p>我是测试窗口</p>",})
$("#test10").dailog({
    title: ‘测试10‘,//窗体标题
    animation: ShowModalAnimation.Fall,})
$("#test11").dailog({
    title: ‘测试11‘,//窗体标题
    animation: ShowModalAnimation.Slit,})
$("#test12").dailog({
    title: ‘测试12‘,//窗体标题
    animation: ShowModalAnimation.Newspaper,});
$("#test13").dailog({
    title: ‘测试13‘,//窗体标题
    animation: ShowModalAnimation.SuperScaled,});
$("#test14").dailog({
    title: ‘测试14‘,//窗体标题
    animation: ShowModalAnimation.SideFall,buttons: [{
        text: "OK",style: "btn btn-info btn-sm",clickEvent: function () {
            alert($(this).text());
        }
    },{
        text: "取消",clickEvent: function () {
            alert($(this).text());
        }
    }]
});

$("#test16").dailog({
    title: ‘测试16‘,content: "https://www.baidu.com/",size: ModalSize.lg,external: true,});

$("button:contains(‘提示信息‘)").on("click",function () {
    Controls.Alert("温馨提示",messageType.info,"提示信息!");
});

$("button:contains(‘警告信息‘)").on("click",function () {
    Controls.Alert("警告",messageType.warn,"警告信息!");
});
$("button:contains(‘成功‘)").on("click",function () {
    Controls.Alert("成功",messageType.success,"成功信息!");
});
$("button:contains(‘错误信息‘)").on("click",function () {
    Controls.Alert("错误",messageType.error,"错误信息!");
});
$("button:contains(‘询问信息‘)").on("click",function () {

    Controls.Confirm("询问","确定删除此项?",function () {
        alert("点击了确定按钮");
    },function () {
        alert("点击了取消按钮");
    });

});
$("button:contains(‘自动关闭‘)").on("click",function () {
    Controls.Alert("自动关闭","我会自动关闭!",true,3000);
});

</script>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读