Popups

显示基于 Bootstrap 模态实现的模态弹出窗口。

• Examples
• 内联弹出窗口
• 远程弹窗
• API文档

#Examples

<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">Launch basic content</a>

<div class="control-popup modal fade" id="contentBasic" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p>This is a very basic example of a popup...</p>
            </div>
        </div>
    </div>
</div>

<a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>

<div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Are you sure you wanna do that?</h4>
            </div>
            <div class="modal-body">
                <p>This is your last chance. After this, there is no turning back.</p>
                <p>You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
            </div>
        </div>
    </div>
</div>

#内联弹出窗口

内联弹出窗口将弹出内容放置在当前页面内，从视图中隐藏。例如，这个容器在页面上是不可见的。

<div class="control-popup modal fade" id="contentBasic">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <p>This is a very basic example of a popup...</p>
            </div>
        </div>
    </div>
</div>

使用data-toggle="modal" 将此容器作为弹出窗口启动的 HTML 属性。

<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">
    Launch basic content
</a>

#远程弹窗

可以使用 AJAX 请求远程加载弹出窗口的内容。使用data-handler 属性以使用 AJAX 处理程序的内容填充弹出窗口。

<a
    data-control="popup"
    data-handler="onLoadContent"
    href="javascript:;"
    class="btn btn-primary btn-lg">
    Launch Ajax Form
</a>

使用data-ajax 属性可以直接引用外部文件或 URL。

<a
    data-control="popup"
    data-ajax="popup-content.htm"
    href="javascript:;"
    class="btn btn-primary btn-lg">
    Launch Ajax Form
</a>

呈现的弹出窗口的部分应遵循以下结构：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="popup">&times;</button>
    <h4 class="modal-title">
        <!-- Modal header title goes here -->
        Send email
    </h4>
</div>
<div class="modal-body">
    <!-- Any popup content goes here -->
    <?= $this->customFormWidget->render() ?>
</div>
<div class="modal-footer">
    <!-- Popup action buttons go here -->
    <button
        type="submit"
        class="btn btn-primary wn-icon-send"
        data-load-indicator="Sending">
        Send
    </button>
    <button
        type="button"
        class="btn btn-default"
        data-dismiss="popup">
        <?= e(trans('backend::lang.relation.close')) ?>
    </button>
</div>

#API文档

#Options:

• content - 内容 HTML 字符串或回调

#数据属性

• data-control="popup" - 启用 ajax 弹出插件
• data-ajax="popup-content.htm" - 要加载的 ajax 内容
• data-handler="onLoadContent" - Winterajax请求名称
• data-keyboard="false" - 允许使用键盘关闭弹出窗口
• data-extra-data="file_id: 1" - Winterajax请求数据
• data-size="large" - 弹出窗口大小，可用大小：giant,huge,large,small,tiny,adaptive （将缩放以适合窗口）
• data-adaptive-height="false" - 允许弹出窗口填充屏幕的高度

#JavaScript API

$('a#someLink').popup({ ajax: 'popup-content.htm' })
$('a#someLink').popup({ handler: 'onLoadSomePopup' })
$('a#someLink').popup({ handler: 'onLoadSomePopup', extraData: { id: 3 } })