微信公衆號 weui dialog實現

     <link rel="stylesheet" href="/wxweb/static/wxweb/css/weui.css"> //注意換成自己的weui.css路徑
      <script src="/wxweb/static/wxweb/jquery/jquery-3.4.1.min.js"></script>
<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Dialog</h1>
        <p class="page__desc">對話框</p>
    </div>

    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog樣式一</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog樣式二</a>
    </div>
    <div class="page__ft">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
    </div>

    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div class="js_dialog" id="iosDialog1" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">彈窗標題</strong></div>
                <div class="weui-dialog__bd">彈窗內容，告知當前狀態、信息和解決方法，描述文字儘量控制在三行內</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">輔助操作</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog1-->
        <!--BEGIN dialog2-->
        <div class="js_dialog" id="iosDialog2" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd">彈窗內容，告知當前狀態、信息和解決方法，描述文字儘量控制在三行內</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var $iosDialog1 = $('#iosDialog1'),
            $iosDialog2 = $('#iosDialog2');

        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });

        $('#showIOSDialog1').on('click', function(){
            $iosDialog1.fadeIn(200);
        });
        $('#showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(200);
        });
    });
</script>
     <script src="/wxweb/static/wxweb/js/weui/weui.min.js"></script> //注意換成自己的weui.js路徑