jquery - jQueryUI 模式的奇怪问题

Question

我在 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'
        });
    });

Answer 1

Shamoon 之所以询问模态 html，是因为通常您会将其指向其他地方。例如: fiddle :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..
            } 
          }] 
       });