jQueryUI 模态的奇怪问题答案

【问题标题】：Weird issue with jQueryUI modaljQueryUI 模态的奇怪问题
【发布时间】：2023-04-09 12:44:02
【问题描述】：

我对 jQueryUI 模态（可以包含模态功能的对话框插件）有一个奇怪的问题。我有一个下拉列表，其中一个选项带有模式。现在，模式打开得很好，但是有一些奇怪的错误。下拉列表中用于弹出模态的链接以某种方式进入模态，带有额外的类（我假设来自模态），当模态关闭时，它会从下拉列表中消失。最后，即使我将文本放入模式中，它也不会显示出来。这是 HTML 部分：

<span class="dropdown" id="loggedInDropdown">
                        <i class="spriteIcons iconArrowUp"></i>
                        <ul class="zebraRows">
                            <li><a id="accountSettings" href="/stuff/settings" title="">Account Settings</a></li>
                            <li><a id="addFunds" class="no-close" href="" title="Add Funds to Your Account">Add Funds</a></li>
                            <li><a id="signOut" href="/users/logout" title="">Sign Out</a></li>
                        </ul> 
                    </span>

这里是 jQuery：

$('#loggedInDropdown').on('click', '#addFunds', function(e) {
        e.preventDefault();
        $('#addFunds').dialog({
            modal: true,
            text: 'Whatever'
        });
    });

【问题讨论】：

顺便说一下，我试着做一个JSFiddle的代码，但它似乎没有jQueryUI作为一个库。
JsFiddle 将 JQuery 作为库...只需查看左侧“框架和扩展”部分...您还可以将库添加为外部依赖项...
你能做到吗？使用 href="#" 更新 href，因为它可能会弄乱您的 html。除了尽量不要将您的模态处理程序包含在另一个处理程序中。如果您将模态处理程序移出第一个处理程序会发生什么？
我需要它在另一个处理程序中，因为我希望它在用户单击该链接时加载，而且我认为如果不将它放在处理程序中是不可能的。顺便说一句，我尝试输入“#”，但没有帮助。
你能把你的模态 HTML 也放上去吗？

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

Shamoon 之所以询问模态 html，是因为通常您会将其指向其他地方。例如：小提琴：http://jsfiddle.net/NbBgW/5/

<span class="dropdown" id="loggedInDropdown">
    <i class="spriteIcons iconArrowUp"></i>
    <ul class="zebraRows">
         <li>
             <a id="accountSettings" href="/stuff/settings">
                 Account Settings
             </a>
         </li>
         <li>
            <a id="addFunds" class="no-close">
                Add Funds
            </a>
         </li>
         <li>
            <a id="signOut" href="/users/logout">
               Sign Out
            </a>
        </li>
    </ul>

    <!-- The Container hiding the actual modal content -->
    <div id="hidden-container" style="display:none;">
        <!-- The Modal content -->
        <div id="addfunds-modal">
            Whatever .. Dude!
        </div>
    </div>

</span>

那么对于 JavaScript：

<script>
   /**
    *   I've also changed it to:
    *   $(document).on('click' .. 
    *
    *   because with a Javascript page that has
    *   lots of changing elements, it's better off
    *   listening to the DOM Document itself.
   **/
   $(document).on('click', '#loggedInDropdown #addFunds', function (e) {
      e.preventDefault();
      $('#addfunds-modal').dialog({
          modal: true
      });
   });
</script>

您的模态正在运行 - 但到了一半，

内容没有text:"" 选项，因此默认为自身（自身也是.dialog() 的目标html）。然而，按钮有一个text 选项：

   .dialog({ 
       buttons: [{ 
            text: "Ok", 
            click: function() {
               //Code..
            } 
          }] 
       });

【讨论】：

谢谢，我对此感到困惑。文档没有说任何关于加载模态 onclick 的内容，所以我在其他地方搜索，我发现了一些东西，但看起来两者都说了不同的东西。文档在对话框中有一个文本元素，但另一件事没有，这让我更加困惑。
别担心！这就是 SO 的意义所在：D 可惜，有很多不同的插件和方法可以用类似的东西做同样的事情；更不用说不同版本的 jQuery 和 jQuery UI。
我发现了一个 SO 问题，它解释了如何使用 onclick 加载 jQueryUI 模式，而不是另一个插件。不过，我绝对明白你的意思。

【解决方案2】：

您的模态可能还有一个 id 为addFunds。改变其中之一，让它做你想做的事。我建议将<a> 标签的 ID 更改为类似于addFundsLink。

您还必须将 JavaScript 更改为：

$('#loggedInDropdown').on('click', '#addFundsLink', function(e) {

【讨论】：

我不认为模态有自己的 ID。如果是这样，它可能是一些奇怪的 jQuery 名称。无论哪种方式，更改 <a> 标记的名称都没有帮助。
在某种程度上你是对的，但你可以解释得更好一点。无论如何，我会支持你，努力。