Dialog

iOS Dialog样式一

         <a href="javascript:;" class="mx-btn mx-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
            <div id="dialogs">
                    <!--BEGIN dialog1-->
                    <div class="js_dialog" id="iosDialog1" style="display: none;">
                        <div class="mx-mask"></div>
                        <div class="mx-dialog">
                            <div class="mx-dialog__hd"><strong class="mx-dialog__title">弹窗标题</strong></div>
                            <div class="mx-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                            <div class="mx-dialog__ft">
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
            </div>
            <script>
                 $(function(){
                    var $iosDialog1 = $('#iosDialog1');
                    $('#dialogs').on('click', '.mx-dialog__btn', function(){
                        $(this).parents('.js_dialog').fadeOut(200);
                    });
                    $('#showIOSDialog1').on('click', function(){
                        $iosDialog1.fadeIn(200);
                    });
                 });
             </script>
        

iOS Dialog样式二

         <a href="javascript:;" class="mx-btn mx-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
             <div id="dialogs">
                    <!--BEGIN dialog2-->
                    <div class="js_dialog" id="iosDialog2" style="display: none;">
                        <div class="mx-mask"></div>
                        <div class="mx-dialog">
                            <div class="mx-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                            <div class="mx-dialog__ft">
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_primary">知道了</a>
                            </div>
                        </div>
                    </div>
             </div>
            <script>
                $(function(){
                    var $iosDialog2 = $('#iosDialog2');
                    $('#dialogs').on('click', '.mx-dialog__btn', function(){
                        $(this).parents('.js_dialog').fadeOut(200);
                    });
                    $('#showIOSDialog2').on('click', function(){
                        $iosDialog2.fadeIn(200);
                    });
                });
            </script>
        

Android Dialog样式一

         <a href="javascript:;" class="mx-btn mx-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
             <div id="dialogs">
                    <!--BEGIN dialog3-->
                    <div class="js_dialog" id="androidDialog1" style="display: none;">
                        <div class="mx-mask"></div>
                        <div class="mx-dialog mx-skin_android">
                            <div class="mx-dialog__hd"><strong class="mx-dialog__title">弹窗标题</strong></div>
                            <div class="mx-dialog__bd">
                                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                            </div>
                            <div class="mx-dialog__ft">
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
             </div>
            <script>
                $(function(){
                    var $androidDialog1 = $('#androidDialog1');
                    $('#dialogs').on('click', '.mx-dialog__btn', function(){
                        $(this).parents('.js_dialog').fadeOut(200);
                    });
                    $('#showAndroidDialog1').on('click', function(){
                        $androidDialog1.fadeIn(200);
                    });
                });
            </script>    
        

Android Dialog样式二

         <a href="javascript:;" class="mx-btn mx-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
             <div id="dialogs">
                    <!--BEGIN dialog4-->
                    <div class="js_dialog" id="androidDialog2" style="display: none;">
                        <div class="mx-mask"></div>
                        <div class="mx-dialog mx-skin_android">
                            <div class="mx-dialog__bd">
                                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
                            </div>
                            <div class="mx-dialog__ft">
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_default">辅助操作</a>
                                <a href="javascript:;" class="mx-dialog__btn mx-dialog__btn_primary">主操作</a>
                            </div>
                        </div>
                    </div>
             </div>
            <script>
                 $(function(){
                    var  $androidDialog2 = $('#androidDialog2');
                    $('#dialogs').on('click', '.mx-dialog__btn', function(){
                        $(this).parents('.js_dialog').fadeOut(200);
                    });
                    $('#showAndroidDialog2').on('click', function(){
                        $androidDialog2.fadeIn(200);
                    });
                });
            </script>