WeUI——對話框dialog

前端：

文章來源：https://weui.io/#dialog

CSS、JS下載地址：

　　weui.css：https://blog-static.cnblogs.com/files/ZM191018/weui.css

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

　　weui.min.js：https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

引入CSS樣式、JS腳本文件

要注意：在引用路徑下必須找得到對應的CSS樣式文件或者JS腳本文件，否則會異常。

<link rel="stylesheet" href="\js\weui\weui.css">
<script src="\js\weui\jquery.min.js"></script>
<script src="\js\weui\weui.min.js"></script>

HTML代碼

<div class="page">

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

 

JS事件

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

 

演示