2

jQueryUI モーダル (モーダル機能を含めることができるダイアログ プラグイン) で奇妙な問題が発生しています。オプションの 1 つにモーダルがあるドロップダウン リストがあります。これで、モーダルは正常に開きますが、奇妙なエラーがいくつかあります。モーダルをポップアップするためのドロップダウンリストのリンクは、何らかの方法でモーダル内に入り、追加のクラス(モーダルからだと思います)があり、モーダルが閉じられると、ドロップダウンリストから消えます。最後に、モーダルにテキストを入れても表示されません。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:""ため、デフォルトでそれ自体が設定されます (それ自体が のターゲットhtmlで.dialog()もあります)。ただし、textボタンには次のオプションがあります。

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

あなたのモーダルにはおそらく id もありaddFundsます。あなたが望むことをするためにそれらの1つを変更してください。<a>タグの ID を のように変更することをお勧めしaddFundsLinkます。

また、JavaScript を次のように変更する必要があります。

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