Question

我写了bootstrap模式，我把它放在单独的模板中。基于我可以点击按钮打开它，但现在我尝试在呈现另一个模板时显示它。重要的是，我想只调用一次模态。例如，当页面是reflesh并且第二次呈现模板时，我不想第二次显示模态。用户登录后这是简单的消息。我该如何咬这个问题？谢谢你的帮助。

以下是我的工作：

（HTML）

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade welcome-modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center text-uppercase">
                <h4 class="modal-title" id="gridSystemModalLabel">Welcome!</h4>
            </div>
            <div class="modal-body text-center">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                </div>
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-sm-6 text-left">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Not Now</button>
                    </div>
                    <div class="col-sm-6">
                        <a class="btn btn-default" href="#" role="button">Edit Profile</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

（CSS）

    @media (min-width: 768px) {
        .welcome-modal .modal-dialog {
            width: 400px;
        }
    }
    .welcome-modal .modal-header {
        border-bottom-width: 0;
        padding: 20px 35px 0 35px;
    }
    .welcome-modal .modal-body {
        border-top-width: 0;
        padding: 20px 35px 0 35px;
    }
    .welcome-modal .modal-body div:first-child {
        padding-bottom: 20px;
    }
    .welcome-modal .modal-footer {
        border-top-width: 0;
        padding: 20px 35px 20px 35px;
    }

Answer 1

正如Chinmayahd所说。您需要控制模态可见性。我过去曾用模态加载动态模板，但在我想要时显示模态。划分＆＃39; loading＆＃39;显示模态的模态。

在渲染另一个模板时显示bootstrap模式

1 个答案: