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

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

下面是我的工作：

（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; 
    }

来源

2016-06-08 Dobry Czlek

http://stackoverflow.com/questions/10617555/fire-jquery-script-on-first-page-load-and-then-never-again-for-that-user使用这个.. – chinmayahd

由于Chinmayahd建议。您需要控制模态可见性。我过去曾经用动态模板加载动态模板，但在需要时显示模态。将“加载”模式与显示模式分开。

来源

2016-06-09 07:24:50 Kamil

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

回答

相关问题