2

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

2 回答 2

2

Shamoon 一直在询问 modal 的原因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>

你的模态正在工作- 但到了一半，

content没有text:""选项，因此默认为它自己（它自己也是 the 的目标html）.dialog()。但是有一个text按钮选项：

   .dialog({ 
       buttons: [{ 
            text: "Ok", 
            click: function() {
               //Code..
            } 
          }] 
       });
于 2013-09-27T18:04:17.440 回答
1

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

您还必须将 JavaScript 更改为：

$('#loggedInDropdown').on('click', '#addFundsLink', function(e) {
于 2013-09-27T17:11:01.757 回答