欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

CSS3效果:bootstrap之modal

来源: 开发者 投稿于  被查看 28283 次 评论:241

CSS3效果:bootstrap之modal


方法一:用bootstrap.css写样式,用bootstrap.js写模态。
html 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Bootstrap之Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击观看弹窗效果</button>
<!--data-toggle="modal" 用于打开模态窗口。data-* 属性用于存储页面或应用程序的私有自定义数据-->
<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 ">
                <h4 class="modal-title " id="myModalLabel" style="display:inline-block">弹窗标题</h4>
                <button type="button" class="close " data-dismiss="modal" aria-label="Close" style="display:inline-block">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group form-group-lg">
                        <label class="col-sm-3 control-label" for="formGroupInputLarge">用户名</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="col-sm-3 control-label" for="formGroupInputBig">密码</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="password" id="formGroupInputBig" placeholder="密码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭弹窗</button>
                <button type="button" class="btn btn-primary">提交弹窗内容</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</html>

方法二:用bootstrap.css写样式,用modal.js写模态。
html 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Bootstrap之Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击观看弹窗效果</button>
<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 ">
                <h4 class="modal-title " id="myModalLabel" style="display:inline-block">弹窗标题</h4>
                <button type="button" class="close " data-dismiss="modal" aria-label="Close" style="display:inline-block">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group form-group-lg">
                        <label class="col-sm-3 control-label" for="formGroupInputLarge">用户名</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group form-group-lg">
                        <label class="col-sm-3 control-label" for="formGroupInputBig">密码</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="password" id="formGroupInputBig" placeholder="密码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭弹窗</button>
                <button type="button" class="btn btn-primary">提交弹窗内容</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<!--以下是(从网上复制的----非本人所写!)modal.js代码-->
<script>
    ~function ($) {
        'use strict';
        // MODAL CLASS DEFINITION
        var Modal = function (element, options) {
            this.options             = options
            this.$body               = $(document.body)
            this.$element            = $(element)
            this.$dialog             = this.$element.find('.modal-dialog')
            this.$backdrop           = null
            this.isShown             = null
            this.originalBodyPad     = null
            this.scrollbarWidth      = 0
            this.ignoreBackdropClick = false
            if (this.options.remote) {
                this.$element
                        .find('.modal-content')
                        .load(this.options.remote, $.proxy(function () {
                            this.$element.trigger('loaded.bs.modal')
                        }, this))
            }
        }
        Modal.VERSION  = '3.3.7'
        Modal.TRANSITION_DURATION = 300
        Modal.BACKDROP_TRANSITION_DURATION = 150
        Modal.DEFAULTS = {
            backdrop: true,
            keyboard: true,
            show: true
        }
        Modal.prototype.toggle = function (_relatedTarget) {
            return this.isShown ? this.hide() : this.show(_relatedTarget)
        }
        Modal.prototype.show = function (_relatedTarget) {
            var that = this
            var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
            this.$element.trigger(e)
            if (this.isShown || e.isDefaultPrevented()) return
            this.isShown = true
            this.checkScrollbar()
            this.setScrollbar()
            this.$body.addClass('modal-open')
            this.escape()
            this.resize()
            this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
            this.$dialog.on('mousedown.dismiss.bs.modal', function () {
                that.$element.one('mouseup.dismiss.bs.modal', function (e) {
                    if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
                })
            })
            this.backdrop(function () {
                var transition = $.support.transition && that.$element.hasClass('fade')
                if (!that.$element.parent().length) {
                    that.$element.appendTo(that.$body) // don't move modals dom position
                }
                that.$element
                        .show()
                        .scrollTop(0)
                that.adjustDialog()
                if (transition) {
                    that.$element[0].offsetWidth // force reflow
                }
                that.$element.addClass('in')
                that.enforceFocus()
                var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
                transition ?
                        that.$dialog // wait for modal to slide in
                                .one('bsTransitionEnd', function () {
                                    that.$element.trigger('focus').trigger(e)
                                })
                                .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
                        that.$element.trigger('focus').trigger(e)
            })
        }
        Modal.prototype.hide = function (e) {
            if (e) e.preventDefault()
            e = $.Event('hide.bs.modal')
            this.$element.trigger(e)
            if (!this.isShown || e.isDefaultPrevented()) return
            this.isShown = false
            this.escape()
            this.resize()
            $(document).off('focusin.bs.modal')
            this.$element
                    .removeClass('in')
                    .off('click.dismiss.bs.modal')
                    .off('mouseup.dismiss.bs.modal')
            this.$dialog.off('mousedown.dismiss.bs.modal')
            $.support.transition && this.$element.hasClass('fade') ?
                    this.$element
                            .one('bsTransitionEnd', $.proxy(this.hideModal, this))
                            .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
                    this.hideModal()
        }
        Modal.prototype.enforceFocus = function () {
            $(document)
                    .off('focusin.bs.modal') // guard against infinite focus loop
                    .on('focusin.bs.modal', $.proxy(function (e) {
                        if (document !== e.target &&
                                this.$element[0] !== e.target &&
                                !this.$element.has(e.target).length) {
                            this.$element.trigger('focus')
                        }
                    }, this))
        }
        Modal.prototype.escape = function () {
            if (this.isShown && this.options.keyboard) {
                this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
                    e.which == 27 && this.hide()
                }, this))
            } else if (!this.isShown) {
                this.$element.off('keydown.dismiss.bs.modal')
            }
        }
        Modal.prototype.resize = function () {
            if (this.isShown) {
                $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
            } else {
                $(window).off('resize.bs.modal')
            }
        }
        Modal.prototype.hideModal = function () {
            var that = this
            this.$element.hide()
            this.backdrop(function () {
                that.$body.removeClass('modal-open')
                that.resetAdjustments()
                that.resetScrollbar()
                that.$element.trigger('hidden.bs.modal')
            })
        }
        Modal.prototype.removeBackdrop = function () {
            this.$backdrop && this.$backdrop.remove()
            this.$backdrop = null
        }
        Modal.prototype.backdrop = function (callback) {
            var that = this
            var animate = this.$element.hasClass('fade') ? 'fade' : ''
            if (this.isShown && this.options.backdrop) {
                var doAnimate = $.support.transition && animate
                this.$backdrop = $(document.createElement('div'))
                        .addClass('modal-backdrop ' + animate)
                        .appendTo(this.$body)
                this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
                    if (this.ignoreBackdropClick) {
                        this.ignoreBackdropClick = false
                        return
                    }
                    if (e.target !== e.currentTarget) return
                    this.options.backdrop == 'static'
                            ? this.$element[0].focus()
                            : this.hide()
                }, this))
                if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
                this.$backdrop.addClass('in')
                if (!callback) return
                doAnimate ?
                        this.$backdrop
                                .one('bsTransitionEnd', callback)
                                .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
                        callback()
            } else if (!this.isShown && this.$backdrop) {
                this.$backdrop.removeClass('in')
                var callbackRemove = function () {
                    that.removeBackdrop()
                    callback && callback()
                }
                $.support.transition && this.$element.hasClass('fade') ?
                        this.$backdrop
                                .one('bsTransitionEnd', callbackRemove)
                                .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
                        callbackRemove()

            } else if (callback) {
                callback()
            }
        }

        // these following methods are used to handle overflowing modals
        Modal.prototype.handleUpdate = function () {
            this.adjustDialog()
        }
        Modal.prototype.adjustDialog = function () {
            var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight;
            this.$element.css({
                paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
                paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
            })
        }
        Modal.prototype.resetAdjustments = function () {
            this.$element.css({
                paddingLeft: '',
                paddingRight: ''
            })
        }
        Modal.prototype.checkScrollbar = function () {
            var fullWindowWidth = window.innerWidth
            if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
                var documentElementRect = document.documentElement.getBoundingClientRect()
                fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
            }
            this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
            this.scrollbarWidth = this.measureScrollbar()
        }
        Modal.prototype.setScrollbar = function () {
            var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
            this.originalBodyPad = document.body.style.paddingRight || ''
            if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
        }
        Modal.prototype.resetScrollbar = function () {
            this.$body.css('padding-right', this.originalBodyPad)
        }
        Modal.prototype.measureScrollbar = function () { // thx walsh
            var scrollDiv = document.createElement('div')
            scrollDiv.className = 'modal-scrollbar-measure'
            this.$body.append(scrollDiv)
            var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
            this.$body[0].removeChild(scrollDiv)
            return scrollbarWidth
        }

        // MODAL PLUGIN DEFINITION
        function Plugin(option, _relatedTarget) {
            return this.each(function () {
                var $this   = $(this)
                var data    = $this.data('bs.modal')
                var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option);
                if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
                if (typeof option == 'string') data[option](_relatedTarget)
                else if (options.show) data.show(_relatedTarget)
            })
        }
        var old = $.fn.modal;
        $.fn.modal             = Plugin;
        $.fn.modal.Constructor = Modal;

        // MODAL NO CONFLICT
        $.fn.modal.noConflict = function () {
            $.fn.modal = old
            return this
        }

        // MODAL DATA-API
        $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
            var $this   = $(this)
            var href    = $this.attr('href')
            var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
            var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
            if ($this.is('a')) e.preventDefault()
            $target.one('show.bs.modal', function (showEvent) {
                if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
                $target.one('hidden.bs.modal', function () {
                    $this.is(':visible') && $this.trigger('focus')
                })
            })
            Plugin.call($target, option, this)
        })
    }(jQuery);
</script>
</body>
</html>

用户评论