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($) {

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