单击按钮时弹出窗口不起作用

Question

我正在创建一个简单的弹出窗口，我不知道我在哪里做错了，但我得到的只是我在样式标签中提到的背景颜色，而不是弹出窗口的内容。我已经在代码中提到/链接了脚本文件和 css 文件。请帮我解决这个问题。

$(document).ready(function(){
        
        $('a.default').click(function(){
            
            var popupbox = $(this).attr('href');
            $(popupbox).fadeIn(400);
            
            var popMargTop = ($(popupbox).height()+24)/2;
            var popMargLeft = ($(popupbox).width()+24)/2;
            $(popupbox).css({
                'margin-top': -popMargTop,
                'margin-left': -popMargLeft
            });
            $('body').append('<div id="mask"></div>');
            $('#mask').fadeIn(400);
            return false;
        });
        
        
        $('a.close, #mask').on('click', function(){
            $('#mask, .popupinfo').fadeOut(400, function(){
                $('#mask').remove();
            });
        });
    });
    
        $(document).keyup(function(e){
            if(e.keyCode == 27){
                $('mask, .popupinfo, #popup-box').fadeOut(400);
                return false;
                
            }
        })

body {
            background: #e2e2e2;
            margin: 0px;
            padding: 0px;
            color: #fff;
        }
        .popupinfo {
	       display: none;
            padding: 15px;
            border: 1px solid #1852fd;
            float: left;
            font-size: 1.2em;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -100px;
            z-index: 99999;
            box-shadow: 0px 0px 4px #1852fd;
            -moz-box-shadow: 0px 0px 4px #1852fd;
            -webkit-box-shadow: 0px 0px 4px #1852fd;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
        #mask {
            display: none;
            background: #9ACD32;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 88888;
            width: 100%;
            height: 100%;
            opacity: 0.9;
        }
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix">
        <a class="btn btn-circle btn-sm default">
            Open <i class="fa fa-user"></i>
        </a>
    </div>
     
     <div id="popup-box" class="popupinfo">
        <form>
            <label>This can be anything</label><br>
         <input type="text" name="random" /><br>
            <a href="javascript:;" class="btn btn-circle btn-sm close">
                Close <i class="fa fa-user"></i>
            </a>
        
         
         
         </form>
     
      </div>

谢谢

Answer 1

我已经更正了你的代码，这里是工作代码：

$(function() { // DOM loaded    

    var openPopup = function(e) { // Function to open the popup
        $(e).fadeIn(400);
        $('#mask, .popupinfo').fadeIn(400);
    };    

    var closePopup = function() { // Function to close the popup
        $('#mask, .popupinfo').fadeOut(400);
    };    

    $('a.default').click(function(e) {
    
        e.preventDefault();
        var popupbox = $(this).attr('href');
        openPopup(popupbox);
        
        var popMargTop = ($(popupbox).height()+24)/2;
        var popMargLeft = ($(popupbox).width()+24)/2;
        $(popupbox).css({
            'margin-top': -popMargTop,
            'margin-left': -popMargLeft
        });
    });    

    $('a.close, #mask').on('click', function() {
        closePopup();
    });
    
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            closePopup();
        }
    });    

});

body {
    background: #e2e2e2;
    margin: 0px;
    padding: 0px;
    color: #fff;
}

.popupinfo {
   display: none;
    padding: 15px;
    border: 1px solid #1852fd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    z-index: 99999;
    box-shadow: 0px 0px 4px #1852fd;
    -moz-box-shadow: 0px 0px 4px #1852fd;
    -webkit-box-shadow: 0px 0px 4px #1852fd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#mask {
    display: none;
    background: #9ACD32;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 88888;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="mask"></div>

<div class="clearfix">
    <a href="#popup-box" class="btn btn-circle btn-sm default">
        Open <i class="fa fa-user"></i>
    </a>
</div>

 <div id="popup-box" class="popupinfo">
    <form>
        <label>This can be anything</label><br>
        <input type="text" name="random" /><br>
        <a href="javascript:;" class="btn btn-circle btn-sm close">
            Close <i class="fa fa-user"></i>
        </a>
    </form>
</div>

Answer 2

将href="#popup-box" 添加到打开弹出窗口的锚点：

<div class="clearfix">
    <a class="btn btn-circle btn-sm default" href="#popup-box">
        Open <i class="fa fa-user"></i>
    </a>
</div>

示例：https://jsbin.com/gewibibule/edit?html,output

在mask之前也缺少#：

$(document).keyup(function(e){
    if(e.keyCode == 27){
        $('#mask, .popupinfo, #popup-box').fadeOut(400);
        return false;

    }
})