如何创建嵌套有 html 内容(模板）的基础弹出框

How to create foundation popover nested with html content (template)

本文关键字：模板 html 何创建 创建 嵌套 内容      更新时间：2023-09-26

我想在基金会弹出窗口中加载一个 html 模板，但我在互联网上找不到任何好的文档或类似的解决方案。我只是想知道天气，这是否可能在弹出框中拥有一个 html 模板及其控制器。我看到我们只是使用如下所示的属性在弹出窗口中加载内容：

<button popover="{{dynamicPopover}}"
  popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>

或

<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>

我可以以某种方式使用范围注入 HTML，但很难为此使用控制器。

当用户将鼠标悬停在视频缩略图上时，我想为我的网站加载一个弹出框（正在使用 angularJS 构建），我想加载视频的预览图像，并将鼠标悬停在弹出框上时，我想有一些按钮在单击它们时执行一些操作。

试试这个 http://codepen.io/Blu-Jay/pen/wMRBLx

$(document).foundation();
.callout{
  text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
  <div class="large-8 large-centered columns">
  <div class="callout">
  <h3>Password Verification</h3>
   <div class="row">
          <div class="small-3 columns">
            <label for="right-label" class="text-right">Username</label>
          </div>
          <div class="small-9 columns">
            <input type="text" id="right-label" placeholder="Username">
          </div>
        </div>
  
  <div class="row">
          <div class="small-3 columns">
            <label for="right-label" class="text-right">Password</label>
          </div>
          <div class="small-9 columns">
            <input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
          </div>
        </div>
</div>
  </div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
        <strong>Password Must meet to following criteria:</strong>
        <ul class="no-bullet">
          <li style="color:red;">Must be between 4 and 8 characters</li>
          <li style="color:red;">Must contain capital letters</li>
        </ul>
      </div>

相关文章：