帶翻轉動畫的GWT模態對話框（如效果庫）

我需要創建一個垂直或水平放置的模式對話框。帶翻轉動畫的GWT模態對話框（如效果庫）

我發現效果庫，這很好，但如何將它集成到GWT中。

我將js文件添加到GWT的HTML文件中，樣式在對話框中定義。但我沒有看到任何影響。

如何在對話框中應用翻轉效果或者有任何其他方式來實現此目的。

popuppanel：在js文件

<g:PopupPanel ui:field="container" height="300px" width="500px" 
     autoHideEnabled="true" glassEnabled="true" styleName="{style.gwtDialogBox}"> 
     <g:HTMLPanel width="595px" height="297px"> 
      <g:FlowPanel> 
       <g:Image url="images/close.ico" styleName="{style.right}" /> 
      </g:FlowPanel> 
     </g:HTMLPanel> 
    </g:PopupPanel>

js函數。

var ModalEffects = (function() { 

    function init() { 


     [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) { 

      var modal = document.querySelector('#' + el.getAttribute('data-modal')), 
       close = modal.querySelector('.md-close'); 

      function removeModal(hasPerspective) { 
       classie.remove(modal, 'md-show'); 

       if(hasPerspective) { 
        classie.remove(document.documentElement, 'md-perspective'); 
       } 
      } 

      function removeModalHandler() { 
       removeModal(classie.has(el, 'md-setperspective')); 
      } 

      el.addEventListener('click', function(ev) { 
       classie.add(modal, 'md-show'); 
       overlay.removeEventListener('click', removeModalHandler); 
       overlay.addEventListener('click', removeModalHandler); 

       if(classie.has(el, 'md-setperspective')) { 
        setTimeout(function() { 
         classie.add(document.documentElement, 'md-perspective'); 
        }, 25); 
       } 
      }); 

      close.addEventListener('click', function(ev) { 
       ev.stopPropagation(); 
       removeModalHandler(); 
      }); 

     }); 

    } 

    init(); 

})();

這是來自效果庫。

謝謝，班尼特。

來源

2013-12-19 Bennet

請提供圖書館/您的代碼或其他內容以提供答案 – Onkar

我需要類似http://tympanus.net/Development/ModalWindowEffects/。在這裏他們保留了頁面中的所有元素並且它們都在運行但是在GWT中，用戶點擊按鈕後，對話框就會被創建。我如何將第三方js函數應用到我的彈出窗口中。請找到上面的代碼。 – Bennet

將.js放入公用文件夾中，該文件夾放置在您的gwt.xml文件所在的同一個包中的客戶端文件夾旁邊。

這樣

-ProjectName 
    - src 
    - com.myProj 
     - public 
     -js 
      yourJS.js 
     *.gwt.xml

有些事情也把這個在您的gwt.xml

<script src="_js-url_"/>

編譯和嘗試。另請參閱此處以供參考here

來源

2013-12-19 06:32:34 Onkar

我已經這樣做了。加載js文件沒有問題。在加載對話框時發生問題。它不調用js文件中的方法。 – Bennet

帶翻轉動畫的GWT模態對話框（如效果庫）

回答

相關問題