SOURCE

// 事件委托代理，如果绑定在现有dom基础上，那么将印象后面通过jQuery生成的dom，导致后面用户自己生成的名片点击不会出现和隐藏
        $('body').on('click', '.item', function () {
            $(this).find('p').slideToggle();
            // 链式调用。// 事件委托代理，因为这边的弹层是用户点击添加时才加入到html当中，所有这边需要使用到事件代理，否则的话绑定在后来添加上的dom中不生效
        }).on('click', '.ok', function () {
            // 获取用户输入的值，然后插入到wrapper类名的元素中
            var name = $('.yourName').val();
            var img = $('.image-url').val();
            var card = $('.yourCard').val();
            if (name != "" && card != "") {
                var str = '<div class="item">\
                                            <div class="img">\
                                                <img src=" ' + img + ' " alt="">\
                                            </div>\
                                            <h3> ' + name + '</h3>\
                                            <p>' + card + '</p>\
                                        </div>'
                $('.wrapper').append(str);
                $('.hide').add('.alert').fadeOut();
                $('.yourName').add('.image-url').add('.yourCard').val('');
            }
            else {
                $('.hide').add('.alert').fadeOut();
                setTimeout(function () {
                    alert('请输入名字与简介！');
                },500);
            }
        })

        // 只点击一次触发，所以绑定one，没有必要每次点击，每次都生成一个弹层
        $('.add').one('click', function () {
            var str = '<div class="hide"></div>\
                            <div class="alert">\
                                <input class="yourName" type="text" placeholder="你的名字">\
                                <input class="image-url" type="text" placeholder="头像url">\
                                <input  class="yourCard" type="text" placeholder="你的简介">\
                                <div class="ok">ok</div>\
                        </div>'
            $('body').append(str);
            // 链式调用。//每次点击弹层都是需要缓慢出现的
        }).on('click', function () {
            $('.hide').add('.alert').fadeIn();
        })

<div class="add">+</div>
    <div class="wrapper">
        <div class="item">
            <div class="img">
                <img src="http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg" alt="">
            </div>
            <h3>Counter</h3>
            <p>Counter爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码。</p>
        </div>
    </div>

.wrapper {
            position: absolute;
            left: 50%;
            margin-left: -150px
        }
        .item {
            width: 300px;
            padding: 20px 0;
            margin-top: 10px;
            background-color: #bbb;
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
        }
        .item .img {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin-left: 20px;
            border-radius: 50%;
            vertical-align: middle;
            overflow: hidden;
        }
        .img img {
            width: 100%;
            height: 100%
        }
        .item h3 {
            display: inline-block;
            margin-left: 20px;
        }
        .item p {
            display: none;
            margin: 20px;
            word-wrap: break-word;
        }
        .hide {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .alert {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -145px;
            transform: translateY(-50%);
            width: 250px;
            padding: 20px;
            border-radius: 20px;
            background-color: #fff;
            text-align: center;
            z-index: 1000;
        }
        .alert input {
            width: 200px;
            height: 30px;
            margin: 20px 0;
            border: none;
            border-bottom: 1px solid #888;
            outline: none;
            color: #FF6700
        }
        .alert .ok {
            width: 50px;
            height: 50px;
            margin-left: 100px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .add {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
            background-color: #ccc;
            color: #fff;
            font-size: 20px;
            border-radius: 50%;
            cursor: pointer;
        }