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，是因为通常你会把它指向其他地方。例如：小提琴：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:""选项，因此默认为自身（本身也是html的目标.dialog()）。但是按钮有一个text选项：

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

Answer 2

您的模态可能还有addFunds的ID。改变其中一个，以便做你想做的事。我建议将<a>代码的ID更改为addFundsLink。

您还必须将JavaScript更改为：

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

jQueryUI模式的奇怪问题

2 个答案: