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

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

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

＆＃13;

＆＃13;

$(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();
        }
    });    

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;

    }
})