登录  /  注册
博主信息
博文 60
粉丝 1
评论 1
访问量 62370
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
利用JS封装代码,将用户登录与发表文章弹窗封装起来_2018年10月10日
PHP学习
原创
842人浏览过

利用JS封装代码,将用户登录与发表文章弹窗封装起来_2018年10月10日

前面调用代码:

首先要引入JQuery和bootsrtap两个JS文件和要用到的bootsrtap的css代码。

然后将弹窗封装到一个js文件中,引用这个js文件,然后调用来调用里面的封装的对象。

下面先把js代码

实例

let UI = {
    alert:function (obj) {
        let title = (obj == undefined || obj.title == undefined ) ? '系统提示' : obj.title;
        let message = (obj == undefined || obj.message == undefined ) ? '' : obj.message;
        let icon = (obj == undefined || obj.icon == undefined) ? 'warm' : obj.icon;
        let html = UI.getAlertHtml();
        html = html.replace('{title}',title);
        html = html.replace('{message}',message);
        html = html.replace('{icon}',icon);
        $('body').append(html);
        $('#UI_madal_sm').modal({backdrop:'static'});
        $('#UI_madal_sm').modal('show');
        $('#UI_madal_sm').on('hidden.bs.modal', function (e) {
            $('#UI_madal_sm').remove();
        })
    },
    open:function (obj) {
        let title = (obj == undefined || obj.title == undefined ) ? '' : obj.title;
        let width = (obj == undefined || obj.width == undefined) ? '500' : obj.width;
        let height = (obj == undefined || obj.height == undefined) ? '450' : obj.height;
        let html = UI.getOpenHtml();
        html = html.replace('{title}',title);

        $('body').append(html);
        $('#UI_open_lg .modal-lg').css('width',width);
        $('#UI_open_lg .modal-body').css('height',height);
        $('#UI_open_lg iframe').attr('src',obj.url);
        $('#UI_open_lg').modal({backdrop: 'static'});
        $('#UI_open_lg').modal('show');
    },
    getOpenHtml:function () {
        let html = '<div class="modal fade bs-example-modal-lg" id="UI_open_lg">\
                            <div class="modal-dialog modal-lg" 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">{title}</h4>\
                                      </div>\
                                    <div class="modal-body">\
                             <iframe frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>\
                            </div>\
                           <div class="modal-footer">\
                          <button type="button" class="btn btn-primary">确认</button>\
                           </div>\
                          </div>\
                         </div>\
                          </div>';
        return html;
    },
    getAlertHtml:function () {
        let html = '<div class="modal fade bs-example-modal-sm" id="UI_madal_sm">\
                            <div class="modal-dialog modal-sm" 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">{title}</h4>\
                                      </div>\
                                    <div class="modal-body">\
                             <p><img src="static/image/{icon}.png" style="margin-right: 10px">{message}</p>\
                            </div>\
                           <div class="modal-footer">\
                          <button type="button" class="btn btn-primary">确认</button>\
                           </div>\
                          </div>\
                         </div>\
                          </div>';
        return html;
    }
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

下面再放前面的调用代码

<script type="text/javascript">
function login() {
   UI.alert({title:'警告提示',message:'请重新输入',icon:'ok'});
   UI.open({height:'600',width:'500',title:'发布文章',url:'http://www.qq.com'});
}
</script>

给登录按钮加一个onclick="login()"来调用触发事件。


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学