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

Posted 2023-02-19

【中文标题】如何创建嵌套与 html 内容（模板）的基础弹出框

【英文标题】：How to create foundation popover nested with html content (template)

【发布时间】：2015-02-21 07:41:18

【问题描述】：

我想在基础弹出框内加载一个 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 构建）我想加载视频的预览图像，而鼠标悬停在弹出框上我想要一些按钮单击它们时执行一些操作。

【问题讨论】：

jsfiddle/plnkr 请

这个 plnkr 可以是一个好的开始。它有一个弹出框并使用上面的代码。 plnkr.co/edit/LdCOLnBK3itskjTJp037。它使用 Angular 本机基础指令项目。你是如何将 html 注入弹出框的？ this plnkr（从原生指令项目 pineconellc.github.io/angular-foundation/#/tooltip 修复）在其工具提示之一中包含 html，但如果我按照您的操作，您希望弹出框内的 html 与模板变量交互，而不仅仅是显示在那里？

@matt：嗨，matt，感谢您的 plnkr，我没有成功，因为我使用了 nsPopover(github.com/nohros/nsPopover)，它允许我注入模板。

【参考方案1】：

试试这个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>