当前位置:坤哥网-kungge-jQuery Mobile学习笔记(二):弹窗使用

jQuery Mobile学习笔记(二):弹窗使用

2017/11/17 11:38:51 坤哥网阅读(901) 评论(0)


弹窗


弹窗使用比较广泛,是一种很流行的对话框,弹窗覆盖在页面上展示,弹窗可以显示文本、图片、地图等内容。

1.创建弹窗:使用a标签和div标签来创建弹窗:a标签添加data-rel="popup"属性,div标签添加data-role="popup" 属性,为div指定id, 然后设置a的href值为div指定的 id,div中的内容则为弹窗显示的内容。注: div与a必须在同一个页面上。

2.关闭弹窗:默认情况下弹窗是没有关闭的按钮的,点击弹窗以外的区域或者按ESC键关闭弹窗,当然也可以指定关闭按钮,按钮属性使用data-rel="back",并可以通过样式来控制按钮位置。在div上添加data-dismissible="false"属性,可以禁止在弹窗区域外关闭弹窗,一般不推荐这样使用。

3.定位弹窗:在a标签上使用data-position-to属性来控制弹窗的位置,控制弹窗位置有三种方式

c8fab1bd-69c0-4045-8bba-84418e008184.png

4.弹窗过渡效果:默认情况下弹窗没有过渡效果,需要在a标签上使用data-transition="value"指定。从性能方面上考虑,推荐使用pop、fade、none过渡效果。

5.弹窗方向小边框:使用属性data-arrow添加弹窗方向小边框。

6.弹窗对话框:可以将弹窗作为一个标准的对话框,包含头部区域、内容区域、底部区域。

7. 图片弹窗:在弹窗中显示图片。

8. 弹窗背景覆盖:在div上使用data-overlay-theme属性在弹窗后添加背景颜色,默认情况下背景色是透明的。

下面是代码实例:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>弹窗</title>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>坤哥网</h1>
        </div>
        <div data-role="content">
            <a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗</a>
            <div data-role="popup" id="popup1">
                <p>这里是弹窗内容,欢迎加入坤哥网一起成长!</p>
            </div>

            <a href="#popup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗(有内边距和外边距)</a>
            <div data-role="popup" id="popup2">
                <h2>坤哥网欢迎您</h2>
                <p>这里是弹窗内容,欢迎加入坤哥网一起成长!给div添加class值"ui-content"可以添加内边距和外边距</p>
            </div>

            <br />

            <!--关闭弹窗-->
            关闭弹窗:<br />
            <!--默认情况下弹窗是没有关闭的按钮的,点击弹窗以外的区域或者按ESC键关闭弹窗,当然也可以指定关闭按钮,按钮属性使用data-rel="back",并可以通过样式来控制按钮位置。在div上添加data-dismissible="false"属性,可以禁止在弹窗区域外关闭弹窗,一般不推荐这样使用-->
            <a href="#popup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗</a>
            <div data-role="popup" id="popup3" class="ui-content">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
                <p>关闭按钮在右上角,点击弹窗以外的区域也可以关闭弹窗</p>
            </div>

            <a href="#popup4" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗</a>
            <div data-role="popup" id="popup4" class="ui-content">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
                <p>关闭按钮在左上角,点击弹窗以外的区域也可以关闭弹窗</p>
            </div>

            <a href="#popup5" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗</a>
            <div data-role="popup" id="popup5" class="ui-content" data-dismissible="false" style="max-width:400px;">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
                <p>这个弹窗只能通过点击右上角的关闭按钮关闭,点击弹窗之外的区域无法关闭弹窗</p>
            </div>

            <br />

            <!--定位弹窗-->
            定位弹窗:<br />
            <!--在a标签上使用data-position-to属性来控制弹窗的位置,控制弹窗位置有三种方式:-->
            <a href="#popup6" data-rel="popup" class="ui-btn" data-position-to="window">Window方式</a>
            <a href="#popup7" data-rel="popup" class="ui-btn" data-position-to="#demo">元素定位方式</a>
            <a href="#popup8" data-rel="popup" class="ui-btn" data-position-to="origin">Origin方式</a>
            <div data-role="popup" id="popup6" class="ui-content">
                <p>该弹窗显示在窗口的中间部分。</p>
            </div>
            <div data-role="popup" id="popup7" class="ui-content">
                <p>该弹窗显示在id="demo"的元素上。</p>
            </div>
            <div data-role="popup" id="popup8" class="ui-content">
                <p>该弹窗显示在点击的按钮上。</p>
            </div>

            <p>坤哥网。</p>
            <p>来这里逛逛。</p>
            <p>来这里玩喽。</p>
            <p><span id="demo" style="color:red;">我是id为demo的元素</span>。</p>

            <br />

            <!--弹窗过渡效果-->
            弹窗过渡效果:<br />
            <!--默认情况下弹窗没有过渡效果,需要在a标签上使用data-transition="value"指定。从性能方面上考虑,推荐使用pop、fade、none过渡效果-->
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="fade">淡入</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="flip">翻转</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="flow">抛出当前页后显示</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="pop">弹出</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="slide">向左滑动</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑动并淡入</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑动</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑动</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="turn">转向</a>
            <a href="#popup9" data-rel="popup" class="ui-btn" data-transition="none">无过渡效果</a>
            <div data-role="popup" id="popup9" class="ui-content">
                <p>弹窗过渡效果演示</p>
            </div>

            <br />

            <!--弹窗方向小边框-->
            弹窗方向小边框:<br />
            <!--使用属性data-arrow添加弹窗方向小边框-->
            <a href="#popup10" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#arrowE">左边</a>
            <a href="#popup11" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#arrowE">顶部</a>
            <a href="#popup12" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#arrowE">右边</a>
            <a href="#popup13" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#arrowE">底部</a>
            <div data-role="popup" id="popup10" class="ui-content" data-arrow="l">
                <p>在左边框有个方向。</p>
            </div>
            <div data-role="popup" id="popup11" class="ui-content" data-arrow="t">
                <p>在顶部边框有个方向。</p>
            </div>
            <div data-role="popup" id="popup12" class="ui-content" data-arrow="r">
                <p>在右边框有个方向。</p>
            </div>
            <div data-role="popup" id="popup13" class="ui-content" data-arrow="b">
                <p>在底部边框有个方向。</p>
            </div>
            <p>弹窗在 <span id="arrowE" style="color:red;">这里</span>显示</p>

            <br />

            <!--弹窗对话框-->
            弹窗对话框:<br />
            <!--可以将弹窗作为一个标准的对话框,包含头部区域、内容区域、底部区域。-->
            <a href="#popupDialog1" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">打开弹窗对话框</a>
            <div data-role="popup" id="popupDialog1">
                <div data-role="header">
                    <h1>对话框头部</h1>
                </div>
                <div data-role="main" class="ui-content">
                    <h2>弹窗对话框内容区域</h2>
                    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
                </div>
                <div data-role="footer">
                    <h1>对话框底部</h1>
                </div>
            </div>

            <br />

            <!--图片弹窗-->
            图片弹窗:<br />
            <!--在弹窗中显示图片-->
            <a href="#picPopup" data-rel="popup" data-position-to="window">
                <img src="http://www.kungge.com/Plug/ueditor/net/upload/image/20170712/6363541741048296189729029.jpg" alt="Skaret View" style="width:100px;height:100px;">
            </a>
            <div data-role="popup" id="picPopup">
                <p>图片弹窗</p>
                <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                <img src="http://www.kungge.com/Plug/ueditor/net/upload/image/20170712/6363541741048296189729029.jpg" style="width:400px;height:400px;" />
            </div>

            <br />

            <!--弹窗背景覆盖-->
            弹窗背景覆盖:<br />
            <!--在div上使用data-overlay-theme属性在弹窗后添加背景颜色,默认情况下背景色是透明的-->
            <a href="#popup14" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">点击弹窗</a>
            <div data-role="popup" id="popup14" class="ui-content" data-overlay-theme="b">
                <p>弹窗背后有个深色背景</p>
            </div>

            <a href="#picPopup2" data-rel="popup" data-position-to="window">
                <img src="http://www.kungge.com/Plug/ueditor/net/upload/image/20170712/6363541741048296189729029.jpg" alt="Skaret View" style="width:100px;height:100px;">
            </a>
            <div data-role="popup" id="picPopup2" data-overlay-theme="b">
                <p>图片弹窗,看有背景色</p>
                <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                <img src="http://www.kungge.com/Plug/ueditor/net/upload/image/20170712/6363541741048296189729029.jpg" style="width:400px;height:400px;" />
            </div>

            <br />

        </div>
        <div data-role="footer">
            赣ICP备16000944号-1
        </div>
    </div>
</body>
</html>

效果图演示:

fe74482a-190d-4f66-ad0f-089b5a49ad4d.gif


标签: jQueryMobile弹窗
分类: 前端框架

有话要说? =>【不用注册,直接登录】,然后刷新本页面来发表您的观点(●'◡'●)