jQueryMobile的Popup总结, data-role="popup"

zhgc

常规用法：
<div>
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>

<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

图标提示：
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>

<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>


展示图片：
<a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="../_assets/img/paris.jpg" alt="Paris, France" style="width:30%"></a>

<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" 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 class="popphoto" src="../_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
</div>


跳出菜单：
<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>

<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
                <li data-role="list-divider">Choose an action</li>
                <li><a href="#">View details</a></li>
                <li><a href="#">Edit</a></li>
                <li><a href="#">Disable</a></li>
                <li><a href="#">Delete</a></li>
        </ul>
</div>


弹框 ：
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>

                        <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
                                <div data-role="header" data-theme="a">
                                <h1>Delete Page?</h1>
                                </div>
                                <div role="main" class="ui-content">
                                        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                                <p>This action cannot be undone.</p>
                                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
                                </div>
                        </div>


如果加这个，那就要自带一个关闭框了
data-dismissible="false"

                        <a href="#popupCloseRight" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Right close button</a>
                        <a href="#popupCloseLeft" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Left close button</a>
                        <a href="#popupUndismissible" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Undismissible Popup</a>

                        <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
                                <a href="#" 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>
                        <p>I have a close button at the top right corner with simple HTML markup.</p>
                        </div>

                        <div data-role="popup" id="popupCloseLeft" class="ui-content" style="max-width:280px">
                                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
                        <p>I have a close button at the top left corner with simple HTML markup.</p>
                        </div>

                        <div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width:280px" data-dismissible="false">
                                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
                        <p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by clicking outside of me.</p>
                        </div>

zhgc

data-rel="popup"——设置当前元素具有弹出窗的功能；

data-role="popup"——设置当前元素为弹出窗；

data-position-to="window"——设置弹出窗出现在窗口中间位置；

data-transition="fade"——设置弹出窗出现的效果；

zhgc

<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false"
        style="max-width: 460px;" class="ui-corner-all">
        <a href="#" data-rel="back" data-role="button" data-theme="e" data-icon="delete"
            data-iconpos="notext" class="ui-btn-right">Close</a>
        <div data-role="header" data-theme="e" class="ui-corner-top">
            <h1>
                发帖</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <p>
                <textarea style="width: 100%; height: 100px;" id="textval"></textarea></p>
            <p style="text-align: center;">
                <a href="#" data-role="button" data-ajax="false" data-transition="flow" onclick="PublishComment();"
                    data-theme="c">发布</a></p>
        </div>
    </div>

zhgc

事件：
afterclose
afteropen
beforeposition
create