奇怪的問題與jQueryUI模式

我有一個奇怪的問題與jQueryUI模式（對話框插件，可以包括模態功能）。我有一個選項的模式下拉列表。現在，模式打開很好，但有一些奇怪的錯誤。下拉列表中的鏈接以某種方式彈出模態進入模態，並有額外的類（我從模態中假設），當模態關閉時，它將從下拉列表中消失。最後，即使我把文字放在模式中，它也不會顯示出來。下面是HTML部分：奇怪的問題與jQueryUI模式

<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="https://stackoverflow.com/users/logout" title="">Sign Out</a></li> 
         </ul> 
        </span>

這裏是jQuery的：

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

來源

2013-09-27 trysis

順便說一句，我試圖做的代碼的的jsfiddle，但它似乎沒有jQueryUI的作爲一個庫。 – trysis

JsFiddle將JQuery作爲一個庫...只需在「框架和擴展」部分的左側查看......您還可以通過以下方式添加庫作爲外部依賴項： –

您可以請這樣做。用href =「＃」更新href，因爲它可能會弄亂你的html。此外，儘量不要將你的模態處理程序封裝在另一個處理程序中。如果將模態處理程序移出第一個處理程序，會發生什麼情況？ – roland

之所以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="https://stackoverflow.com/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.. 
      } 
      }] 
     });

來源

2013-09-27 18:04:17 MackieeE

謝謝，我對此感到困惑。文檔沒有提到加載模式onclick的任何信息，所以我在其他地方搜索了一下，發現了一些東西，但看起來好像都說了不同的東西。文檔在對話框中有一個文本元素，但另一個沒有，這使我更困惑。 – trysis

不用擔心！這就是爲什麼在這裏：D唉但是，有不同的插件和方法__alot__做同樣的事情與這樣的事情在那裏;更不用說jQuery和jQuery UI的不同版本了。 – MackieeE

我發現的是一個SO問題，解釋瞭如何使用onclick加載jQueryUI模式，而不是另一個插件。不過，我明白你的意思。 – trysis

你可能模式也有addFunds的ID。改變其中之一，讓它做你想做的事。我建議將<a>標籤的ID更改爲addFundsLink。

您還可以更改JavaScript來：

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

來源

2013-09-27 17:11:01 Shamoon

我不認爲模式有自己的ID。如果是這樣，這可能是一個奇怪的jQuery名稱。無論哪種方式，更改''標籤的名稱都沒有幫助。 – trysis

從某種意義上說，你是對的，但你可以更好地解釋它。無論如何，我會爲你付出努力。 – trysis

奇怪的問題與jQueryUI模式

回答

相關問題