twitter-bootstrap 相关问题

需要帮助。我有一个，我想将其加载到模式窗口中，并使用 Leader Line 构造函数将元素与绘制的线连接起来。如果表格未加载到模态中需要帮助。我有一个，我想将其加载到模式窗口中，并使用 Leader Line 构造函数将元素与绘制的线连接起来。如果表格未加载到模态窗口（位于页面index.php中），则会绘制线条，但如果我将其加载到模态窗口中，该功能将不再起作用（照片显示了我得到的结果）。我做错了什么以及如何解决这个问题？图片：当index.php窗口中时：当在模态窗口中打开它之前：当位于已打开的模态窗口中时：<body translate="no"> <div class="container" style="width: 800px"> <div class="modal-control my-3"> <p> <a href="#" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#ChartFlowModal"> open Chart </a> </p> </div> <?php include('charts-modal.php');?> </div>  <script src="jQuery/jquery-3.7.1/jquery.js" type="text/javascript"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js" type="text/javascript"></script>  <script> // Draw a line between two elements function drawLine(e1, e2) { var line = new LeaderLine( e1, e2, ); line.setOptions({startSocket: 'right', endSocket: 'bottom'}); line.color = '#999'; line.startPlug = 'behind'; line.endPlug = 'behind'; line.path = 'grid'; line.size = 1; } drawLine ( document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2') ); drawLine ( document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2') ); </script> </body> // Modal window charts-modal.php  <div class="modal fade" id="ChartFlowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <table class="sku-table" style="width: 100%; border: thin solid white;"> <tr> <th style="width: 20%; text-align: center;">Contain</th> <th style="width: 10%; text-align: center;">Type</th> <th style="width: 10%; text-align: center;">Subcategory</th> </tr> <tr style="height: 5px;"> <td colspan='3'></td> </tr> <tr class="end-values"> <td></td> <td id="role-text-1.2" style="text-align: center;">4</td> <td id="role-text-2.2" style="text-align: center;">01</td> </tr> <tr> <td colspan="3"> <ul class="sku-structure"> <li class="bi bi-circle-fill"><strong>Type</strong><span class="source-values">Processors</span> <ul> <li class="bi-square"><a>Type name</a><span class="to-card">Processors</span></li> <li class="bi-1-square-fill"><a>Type code</a><span class="to-sku">4</span><span id="role-text-1.1"></span></li> </ul> </li> <li class="bi bi-circle-fill pt-2"><strong>Subcategory</strong><span class="source-values">GPU line</span> <ul> <li class="bi-square"><a>Subcategory name</a><span class="to-card">GPU line</span></li> <li class="bi-2-square-fill"><a>Subcategory code</a><span class="to-sku">01</span><span id="role-text-2.1"></span></li> </ul> </li> </ul> </td> </tr> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> 嗯，你需要在模态打开后绘制引导线。您可以使用引导模式事件来实现此目的。当模态为shown时，绘制线条，当模态为hidden时，隐藏线条。这是脚本： function drawLine(e1, e2) { let line = new LeaderLine( e1, e2, ); line.setOptions({startSocket: 'right', endSocket: 'bottom'}); line.color = '#999'; line.startPlug = 'behind'; line.endPlug = 'behind'; line.path = 'grid'; line.size = 1; return line; } let line1, line2; const myModalEl = document.getElementById('ChartFlowModal') myModalEl.addEventListener('shown.bs.modal', event => { line1 = drawLine ( document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2') ); line2 = drawLine ( document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2') ); }) myModalEl.addEventListener('hide.bs.modal', event => { if (line1) { line1.remove() } if (line2) { line2.remove() } }) 您可以在此处查看工作示例。它的外观如下：注意：如果您在模态框内滚动，您可能还需要重新定位线条。为此用途line.position()。

jquery twitter-bootstrap

回答 1 投票 0

leader-line.js 使用模态窗口时出现问题

需要帮助。我有一个，我想将其加载到模式窗口中，并使用 Leader Line 构造函数将元素与绘制的线连接起来。如果表格未加载到模态中需要帮助。我有一个，我想将其加载到模式窗口中，并使用 Leader Line 构造函数将元素与绘制的线连接起来。如果表格未加载到模态窗口（位于页面index.php中），则会绘制线条，但如果我将其加载到模态窗口中，该功能将不再起作用（照片显示了我得到的结果）。我做错了什么以及如何解决这个问题？当index.php窗口中时：打开模态窗口之前时：当位于已打开的模态窗口中时：<body translate="no"> <div class="container" style="width: 800px"> <div class="modal-control my-3"> <p> <a href="#" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#ChartFlowModal"> open Chart </a> </p> </div> <?php include('charts-modal.php');?> </div>  <script src="jQuery/jquery-3.7.1/jquery.js" type="text/javascript"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js" type="text/javascript"></script>  <script> // Draw a line between two elements function drawLine(e1, e2) { var line = new LeaderLine( e1, e2, ); line.setOptions({startSocket: 'right', endSocket: 'bottom'}); line.color = '#999'; line.startPlug = 'behind'; line.endPlug = 'behind'; line.path = 'grid'; line.size = 1; } drawLine ( document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2') ); drawLine ( document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2') ); </script> </body> // Modal window charts-modal.php  <div class="modal fade" id="ChartFlowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <table class="sku-table" style="width: 100%; border: thin solid white;"> <tr> <th style="width: 20%; text-align: center;">Contain</th> <th style="width: 10%; text-align: center;">Type</th> <th style="width: 10%; text-align: center;">Subcategory</th> </tr> <tr style="height: 5px;"> <td colspan='3'></td> </tr> <tr class="end-values"> <td></td> <td id="role-text-1.2" style="text-align: center;">4</td> <td id="role-text-2.2" style="text-align: center;">01</td> </tr> <tr> <td colspan="3"> <ul class="sku-structure"> <li class="bi bi-circle-fill"><strong>Type</strong><span class="source-values">Processors</span> <ul> <li class="bi-square"><a>Type name</a><span class="to-card">Processors</span></li> <li class="bi-1-square-fill"><a>Type code</a><span class="to-sku">4</span><span id="role-text-1.1"></span></li> </ul> </li> <li class="bi bi-circle-fill pt-2"><strong>Subcategory</strong><span class="source-values">GPU line</span> <ul> <li class="bi-square"><a>Subcategory name</a><span class="to-card">GPU line</span></li> <li class="bi-2-square-fill"><a>Subcategory code</a><span class="to-sku">01</span><span id="role-text-2.1"></span></li> </ul> </li> </ul> </td> </tr> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> 嗯，你需要在模态打开后绘制引导线。您可以使用引导模式事件来实现此目的。当模态为shown时，绘制线条，当模态为hidden时，隐藏线条。这是脚本： function drawLine(e1, e2) { let line = new LeaderLine( e1, e2, ); line.setOptions({startSocket: 'right', endSocket: 'bottom'}); line.color = '#999'; line.startPlug = 'behind'; line.endPlug = 'behind'; line.path = 'grid'; line.size = 1; return line; } let line1, line2; const myModalEl = document.getElementById('ChartFlowModal') myModalEl.addEventListener('shown.bs.modal', event => { line1 = drawLine ( document.getElementById('role-text-1.1'), document.getElementById('role-text-1.2') ); line2 = drawLine ( document.getElementById('role-text-2.1'), document.getElementById('role-text-2.2') ); }) myModalEl.addEventListener('hide.bs.modal', event => { if (line1) { line1.remove() } if (line2) { line2.remove() } }) 您可以在此处查看工作示例。它的外观如下：注意：当模式打开时，您可能还需要重新定位线条。为此用途line.position()。

jquery twitter-bootstrap

回答 1 投票 0

如何更改默认填充引导表格单元格？

引导表格单元格（td、th）的默认填充为 8 像素。将所有引导表更改为另一个值的好方法是什么？

twitter-bootstrap

回答 2 投票 0

Yii2 的 DetailView 中的列宽/分布是由什么设置的？

相同的视图，相同的DetailView，相同的代码，不同的模型，不同的最终结果：在这种情况下，什么设置列宽？为什么它随着每条记录而变化？这是 Bootstrap 还是 Yii2 问题...

css twitter-bootstrap yii yii2 detailview

回答 5 投票 0

Summernote 下拉菜单不适用于 Bootstrap 导航栏

我使用 bootstrap 框架作为导航栏，现在我想使用 Summernote WYSIWYG HTML 编辑器。如果我导入 bootstrap.min.js 脚本，导航栏下拉菜单可以正常工作，但 Summernote 中的下拉菜单不能......

javascript jquery html css twitter-bootstrap

回答 10 投票 0

如何将 Affix 添加到 Bootstrap 固定底部导航栏

我知道我们可以向 Bootstrap 中的所有类型的常规导航栏添加附加实用程序。然而，就我而言，我需要将词缀添加到专门的导航栏固定底部导航栏。 @import url("https://m...

javascript jquery css twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

将引导程序 3 至 4 个按钮切换升级为单选按钮

我在将引导按钮组从 Bootstrap 3 升级到 Bootstrap 4 时遇到了麻烦，它们应该是单选按钮输入？基本上，我只想要按钮

jquery twitter-bootstrap

回答 1 投票 0

更改表单内嵌输入和标签的宽度

我正在尝试更改整个表单的宽度 - 内联 - 输入和标签。您可以看到此页面上的搜索框和标签下拉，我希望它适合在同一行。 https://...

css twitter-bootstrap

回答 1 投票 0

引导模式上的tinymce代码编辑器不可编辑

我有一个奇怪的问题，即代码编辑器在引导模式上显示时不可编辑。这是一个代码示例。 https://jsfiddle.net/sogrbilja/4s9cyetk/14/ 我有一个奇怪的问题，即代码编辑器在引导模式上显示时不可编辑。这是一个代码示例。 https://jsfiddle.net/sogrbilja/4s9cyetk/14/ <div class="modal fade" id="_bodyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Why I cannot edit html?</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <textarea data*id="0" id="bodyText" ></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvori</button> <button type="button" class="btn btn-primary" onclick="acceptChanges()">Primeni izmene</button> </div> </div> </div> </div> <button class="btn btn-sm btn-info" onclick="editEmailBody();">click here to invoke modal first</button> tinymce.init({ selector: '#bodyText', height: 300, plugins: 'code', menubar: 'view' }); const _bodyModal = new bootstrap.Modal(document.getElementById('_bodyModal'), { keyboard: false }); function editEmailBody() { tinymce.get('bodyText').setContent("next click on View/Source code to invoke code editor and there try to change something, it is not possible, but i don know why"); _bodyModal.show(); } Bootstrap 将阻止所有将焦点移动到另一个模式对话框的尝试。因此，正如TinyMCE文档中所述，您需要防止Bootstrap将焦点捕获在Bootstrap对话框中。看来您正在使用 Bootstrap 5，这意味着您需要添加以下内容： // Prevent Bootstrap dialog from blocking focusin document.addEventListener('focusin', (e) => { if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) { e.stopImmediatePropagation(); } }); 这是使用上述内容并显示其工作原理的更新小提琴：https://jsfiddle.net/92dfrh5z/ buscado 3 解析器解决了问题并最终解决了问题。

twitter-bootstrap tinymce

回答 2 投票 0

自定义 Bootstrap 4 的网格系统断点

我有一个应用程序，其中设计需要分别从台式机到平板电脑或 xl 到 lg 的 1280 断点。然而，Bootstrap 本身在 1200 处有 xl 断点。我需要改变那个 xl

css twitter-bootstrap sass responsive-design bootstrap-4

回答 4 投票 0

如何在Bootstrap Datepicker中设置maxViewMode（使用JS Fiddle）

我有一个简单的 Bootstrap Datepicker 安装： HTML： JS： $("#datepicker").datepicker( {minViewMode: "天", maxViewMode: "天"}); 我正在努力

javascript jquery twitter-bootstrap datepicker bootstrap-datepicker

回答 2 投票 0

阻止日期选择器四处浮动

我遇到了浮动日期选择器日历的问题。我需要阻止它这样做。我需要它留在输入框中。 $('.date').datepicker({ 格式：'mm-dd-yyyy', 自动关闭：真 })...

javascript twitter-bootstrap

回答 2 投票 0

ASP.Net Core 2.0 MVC 网站打开 Bootstrap Modal Dialog 时样式和内容消失

我正在开发一个 ASP.Net Core 2.0 MVC Web 应用程序并使用 Nginx 在 Ubuntu 16.04 上运行它。一切都工作得很好，直到我在生产中运行时打开任何类型的模态对话框。同时

twitter-bootstrap asp.net-core asp.net-core-mvc

回答 1 投票 0

twitter-bootstrap 相关问题

最新问题