SOURCE

$(function () {
    var closeWindow = function (obj) {
        obj.length && obj.hide();
        $('.js-popmask').hide();
    };
    $('.js-pop').on('click', function (e) {
        var $window = $('[data-window="' + $(this).data('windowname') + '"]');
        var $mask = $('.js-popmask');
        $mask.show();
        $window.show();
    });
    $('.js-popwindow').on('click', '.js-close', function (e) {
        closeWindow($(this).parents('.m-pop'));
    });
    $('.js-popwindow').on('click', '.js-confirm', function (e) {
        closeWindow($(this).parents('.m-pop'));
		// 这里可以放点击确定后执行的操作
    });
	// 如果不需要点击遮罩关闭弹窗，则把本段删掉
    $('.js-popmask').on('click', function (e) {
        closeWindow($('.js-popwindow'));
    });
});

<button class="js-pop" data-windowname="demowindow">普通弹窗</button>
<button class="js-pop" data-windowname="anotherwindow">只有一个按钮的弹窗</button>
<button class="js-pop" data-windowname="notitlewindow">无标题弹窗</button>
<button class="js-pop" data-windowname="noclosewindow">无关闭按钮弹窗</button>


<!-- 1. 普通弹窗 -->
<div class="m-pop js-popwindow" data-window="demowindow">
    <div class="close js-close"></div>
    <div class="tit">弹窗标题</div>
    <div class="desc">弹窗内容弹窗内容弹窗内容</div>
    <div class="ctrl">
        <button class="btn-cancel js-close">取消</button>
        <button class="btn-confirm js-confirm">确定</button>
    </div>
</div>


<!-- 2. 只有一个按钮的弹窗 -->
<div class="m-pop js-popwindow" data-window="anotherwindow">
    <div class="close js-close"></div>
    <div class="tit">只有一个按钮的弹窗</div>
    <div class="desc">用起来非常简单，只要删掉一个按钮就行了</div>
    <div class="ctrl">
        <button class="btn-confirm js-confirm">知道了</button>
    </div>
</div>


<!-- 3. 无标题弹窗 -->
<div class="m-pop js-popwindow" data-window="notitlewindow">
    <div class="close js-close"></div>
    <div class="desc">不要标题的弹窗，就是把 &lt;div class="tit"&gt;&lt;/div&gt; 删掉就行</div>
    <div class="ctrl">
        <button class="btn-confirm js-confirm">知道了</button>
    </div>
</div>


<!-- 4. 无关闭按钮弹窗 -->
<div class="m-pop js-popwindow" data-window="noclosewindow">
    <div class="desc">不要关闭按钮的弹窗，就是把 &lt;div class="close js-close"&gt;&lt;/div&gt; 删掉就行</div>
    <div class="ctrl">
        <button class="btn-confirm js-confirm">知道了</button>
    </div>
</div>


<div class="m-pop-mask js-popmask"></div>

/* 弹窗 */
.m-pop { display: none; position: fixed; z-index: 100; top: 50%; left: 50%; max-width: 320px; background: #fff; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1); box-shadow: 0 0 20px rgba(0, 0, 0, .1); }
/* 弹窗遮罩 */
.m-pop-mask { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); }
    /* 关闭按钮 */
    .m-pop .close { position: absolute; right: 10px; top: 11px; width: 16px; height: 16px; background: url(http://pic.celong.cn/uploads/ueditor/2018-05-15/15263737389.png) no-repeat 0 0; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
    /* 标题 */
    .m-pop .tit { padding: 10px 15px 0; font-weight: bold; }
    /* 内容区 */
    .m-pop .desc { padding: 15px; color: #666; }
    /* 按钮区 */
    .m-pop .ctrl { overflow: hidden; border-top: 1px solid #eee; }
        .m-pop .btn-confirm, .m-pop .btn-cancel { width: 100%; height: 40px; text-align: center; line-height: 40px; font-size: 14px; border: none; background: transparent; -webkit-appearance: none; appearance: none; }
            .m-pop .btn-confirm { color: #03a9f4; }
            .m-pop .btn-cancel { float: right; width: 50%; color: #333; }
            .m-pop .btn-cancel + .btn-confirm { width: 50%; border-right: 1px solid #eee; }