zoukankan      html  css  js  c++  java
  • 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="jsweuiweui.css">
    <script src="jsweuijquery.min.js"></script>
    <script src="jsweuiweui.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>

    演示

  • 相关阅读:
    JavaScript对象创建的几种方式
    【应知应会】15个常用的JavaScript字符串操作方法
    JFreeChart 之折线图
    JFreeChart 之饼图
    百度 Echart 的使用
    UEditor 的使用
    获取中文汉字字符串相应的拼音和首字母的大小写
    Java 操纵XML之修改XML文件
    Java 操纵XML之读取XML文件
    Java 操纵XML之创建XML文件
  • 原文地址:https://www.cnblogs.com/ZM191018/p/13862582.html
Copyright © 2011-2022 走看看