1

Zurb のReveal Pluginを使用して表示される要素があり、モーダル ウィンドウの配置方法に問題があります。

要素をページの中央、折り目の上に配置するようです。ただし、スクロールしなければ見えない位置にあるリンクによってモーダル ウィンドウがアクティブ化されている場合、ユーザーはウィンドウを見ることができません。ページ全体ではなく、現在のスクロール位置に基づいて要素を中央に配置する方法はありますか?

私が知る限り、プラグインの関連するソース コードは次のとおりです。

変数セット (ln 41):

var modal    = $(this),
topMeasure = parseInt(modal.css('top'), 10),                                                                                                
topOffset  = modal.height() + topMeasure,                                                                                                   
locked     = false,                                                                                                                         
modalBg    = $('.reveal-modal-bg'),                                                                                                         
closeButton;

Div のアニメーション化 (ln 61)

 function openAnimation() {                                                                                                                    
    if (!locked) {                                                                                                                              
      lockModal();                                                                                                                              
      if (options.animation === "fadeAndPop") {                                                                                                 
        modal.css({                                                                                                                             
            'top': $(document).scrollTop() - topOffset,                                                                                         
            'opacity': 0,                                                                                                                       
            'visibility': 'visible'                                                                                                             
        });                                                                                                                                     
        modalBg.fadeIn(options.animationSpeed / 2);                                                                                             
        modal.delay(options.animationSpeed / 2).animate({                                                                                       
          "top": $(document).scrollTop() + topMeasure + 'px',                                                                                   
          "opacity": 1                                                                                                                          
        }, options.animationSpeed, function () {                                                                                                
          modal.trigger('reveal:opened');                                                                                                       
        });                                                                                                                                     

      }   
      //etc...

GitHub からの完全なソース コード

4

5 に答える 5

4

同じ問題が発生し、hrefリンクに「＃」が含まれるタグを使用してreveal関数を呼び出していることに気付きました。

これを呼び出すと、リビール関数が呼び出される前にページがリロードされたため、リビールボタンを押すと、リビールモーダルの画面位置が画面の座標にジャンプし、モーダル画面が画面の半分に表示されました。

リンクからこの「＃」を削除すると、問題がすぐに分類されます...

お役に立てば幸いです...

于 2012-11-29T14:54:56.527 に答える
1

モーダルがページのメイン セクションの外側にあり、不適切な相対親となる行または列の内側にないことを確認してください。

于 2012-08-10T16:09:31.123 に答える
0

行/列のdivブロック内にモーダル自体のdivがありますか？

例：

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
    <div id="viewModal" class="reveal-modal large">My Modal</div>
  </div>
</div>

この場合、説明した動作が発生する可能性があります。

ドキュメントから：

注意：モーダルは、ページの最後、行または列の後に配置する必要があります。

以下のこのコードは正しく機能します。

<div class="row">
  <div class="twelve columns">
    <div id="featured"><a href="" data-reveal-id="viewModal">View My Modal</a></div>
  </div>
</div>

<div id="viewModal" class="reveal-modal large">My Modal</div>
于 2012-12-27T20:53:58.280 に答える
0

ページの読み込み時に起動し、すべての Reveal モーダルを探して、タグの直前の空のターゲット div に移動する簡単なスクリプトを作成しました。このようにして、マークアップを分離したり、他の人がフォローしたり作業したりしやすくするために、すべてのモーダルをどこにでも置いておくことができました。

于 2013-06-04T13:05:11.403 に答える