js实现按钮点击弹出迷你层效果代码-html代码-BFW代码库

代码语言：html
所属分类：弹出层
代码描述：js实现按钮点击弹出迷你层效果代码，弹出上传文件层、删除确认层、评论层。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: white;
        }
        .qutton {
            box-sizing: content-box !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
            cursor: auto;
        }
        .qutton.close {
            position: absolute !important;
            cursor: pointer;
        }
        .buttonCollection {
            width: 320px;
            height: auto;
            margin: 110px auto 0px auto;
            padding: 10px;
            text-align: center;
        }
        .qutton {
            display: inline-block;
            margin-right: 35px;
        }
        .qutton:last-child {
            margin-right: 0;
        }
        .qutton_dialog {
            display: none;
        }
        .button_basic, #button_basic_upload, #button_basic_confirm_delete, #button_basic_submit_comment {
            display: block;
            width: 250px;
            height: 70px;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
            text-align: center;
            line-height: 70px;
            border-radius: 4px;
            font-family: "Roboto";
            cursor: pointer;
            color: #fff;
        }
        .button_basic:hover, #button_basic_upload:hover, #button_basic_confirm_delete:hover, #button_basic_submit_comment:hover {
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
        }
        #uploadDialog {
            width: 300px;
            padding: 15px 10px;
            border-radius: 4px;
            background-color: #fff;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
        }
        #uploadDialog h2 {
            text-align: center;
            font-weight: normal;
            padding: 10px;
            font-size: 1.2em;
        }
        #uploadDialog input#fileUrl {
            width: 100%;
            height: 30px;
            border-radius: 2px;
            border: 1px solid #afafaf;
            padding: 0 5px;
            font-size: 1em;
        }
        #uploadDialog .urlField {
            display: block;
            width: 83%;
            height: 30px;
            padding: 5px;
            margin: 10px auto 0 auto;
        }
        #button_basic_upload {
            width: 80%;
            height: 40px;
            line-height: 22px;
            background-color: #498AF2;
            border: 1px solid #196bef;
            border-bottom: 1px solid #105fdf;
            color: white;
            padding: 9px;
            margin: 0 auto;
            margin-top: 20px;
        }
        #deleteDialog {
            width: 220px;
            padding: 15px 10px;
            border-radius: 4px;
            background-color: #fff;
        }
        #deleteDialog h2 {
            padding: 10px;
            font-weight: normal;
            text-align: center;
            font-family: "Roboto";
        }
        #button_basic_confirm_delete {
            width: 180px;
            height: 35px;
            background-color: green;
            background-color: #EB1220;
            border: 1px solid #bc0e1a;
            margin: 0 auto;
            line-height: 33px;
            margin-top: 5px;
        }
        #commentDialog {
            width: 380px;
            height: 250px;
            border-radius: 4px;
            padding: 15px;
            background-color: #fff;
        }
        #commentDialog textarea#commentInput {
            display: block;
            width: 100%;
            height: 70%;
            margin: 0 auto;
            padding: 8px;
            font-size: 1em;
            border-radius: 2px;
            border: 1px solid #afafaf;
            resize: none;
        }
        #commentDialog textarea#commentInput:focus {
            outline: none;
        }
        #button_basic_submit_comment {
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: white;
            font-size: 1em;
            margin-top: 15px;
            background-color: #498AF2;
            border: 1px solid #196bef;
        }
    </style>
</head>
<body>

    <!-- 代码部分begin -->
    <div class="buttonCollection">
        <div class="qutton" id="qutton_upload">
            <div class="qutton_dialog" id="uploadDialog">
                <h2>上传</h2>
                <div class="urlField">
                    <input type="text" id="fileUrl" placeholder="文件地址">
                </div>
                <div id="button_basic_upload">
                    选择文件
                </div>
            </div>
        </div>

        <div class="qutton" id="qutton_delete">
            <div class="qutton_dialog" id="deleteDialog">
                <h2>确定？</h2>
                <div id="button_basic_confirm_delete">
                    确定删除
                </div>
            </div>
        </div>

        <div class="qutton" id="qutton_comment">
            <div class="qutton_dialog" id="commentDialog">
                <textarea name="comment" id="commentInput" placeholder="你的评论..."></textarea>
                <div id="button_basic_submit_comment">
                    发送
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/velocity.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/velocity.ui.min.js"></script>
    <script>

        (function($) {

            /********************************************
            * Quttons.js                                *
            * Quttons are buttons made of Quantum Paper *
            * Author : Nash Vail                        *
            *********************************************/

            'use strict';
            // Exporting module to global
            window.Qutton = {};

            // Factory method for producing new Material Dialog objects
            window.Qutton.getInstance = function(jQueryDOMElement) {
                if (jQueryDOMElement === null) throw new Error("Passed in element doesn't exist in DOM");
                return new Qutton(jQueryDOMElement);
            };

            // Qutton Object
            function Qutton(jQueryDOMElement) {

                // Cache the important elements as jQuery object
                this.$container = jQueryDOMElement;
                // Dialog is alias of the box that pops up on clicking the Qutton
                this.$dialog = this.$container.children();
                // Cache the close button if it exists
                this.$closeButton = this.$container.find('.close');

                // When button is expanded into a dialog isOpen holds true
                this.isOpen = false;

                // Configuration of the popped up dialog
                this.dialogConfig = {
                    width: this.$dialog.outerWidth(),
                    height: this.$dialog.outerHeight(),
                    backgroundColor: toHex(this.$dialog.css('background-color')),
                    borderRadius: this.$dialog.css('border-radius'),
                    zIndex: this.$dialog.css('z-index')
                };


                // Configuration of Qutton
                this.quttonConfig = {
                    width: 60,
                    height: 60,
                    backgroundColor: "#EB1220",
                    icon: "",
                    // Url of the icon that the button is supposed to hold
                    easing: 'easeInOutQuint'
                };


            }

            // Initializes the click listeners on the qutton itself, document and close button
            Qutton.prototype.init = function(quttonConfig) {

                $.extend(this.quttonConfig, quttonConfig);

                this.$dialog.hide();

                // Set up the icon and other properties of the div
                this.setIcon();
                this.$container.css({
                    'width': this.quttonConfig.width + "px",
                    'height': this.quttonConfig.height + "px",
                    'background-color': this.quttonConfig.backgroundColor,
                    'border-radius': this.quttonConfig.height + "px"
                });

                // Initialize the event handlers
                this.events.click.call(this);
                this.events.click_document.call(this);
                this.events.click_close_button.call(this);

            };



            Qutton.prototype.closeDialog = function() {
                this.setIcon();
                this.animateOut();
            };

            Qutt.........完整代码请登录后点击上方下载按钮下载查看