3

こんにちは、次の JavaScript を作成して、動的に作成された id タグを持つモーダルを、サイズ変更機能 (幅と高さに関係なく) を介して画面の中央に配置できるようにしました。

ただし、ページの読み込み時にはonClick、ボタンを介して表示されるのではなく、モーダルが表示されます。私は初心者なので、コードで何を変更する必要があるのか​​ わからないため、代わりにページの読み込み時にモーダルが非表示になります。

Javascript:

    $('body').prepend('');

    $(関数(){
        $(window).resize(関数(){       

    // 画面の高さと幅を取得  
    var maskHeight = $(window).height();  
    var maskWidth = $(window).width();

    // 中央揃えの値を計算します
    var dialogTop = (maskHeight - $('.modalbox').height())/2;  
    var dialogLeft = (maskWidth - $('.modalbox').width())/2;

    // オーバーレイとダイアログ ボックスに値を割り当てます
    $('#overlay').css({ 高さ:マスクの高さ, 幅:マスクの幅 }).show();
    $('#modalcontainer').css({ 上: dialogTop、左: dialogLeft}).show();
    }).resize();
    });

    $('a.modal').each(関数() {
          var link = $(これ);
          var id = link.attr('href');
          var ターゲット = $(id);               

          if($("#modalcontainer" + id).length === 0) {
              $('#modalcontainer').append(ターゲット);
          }

          $("#main " + id).remove();

          link.click(関数() {
            $('#modalcontainer > div').hide();        
            target.show();
            $('#overlay').show();
            false を返します。
          });
        });

        $('.close').click(関数() {
          $('#modalcontainer > div').hide();
          $('#overlay').hide();

          false を返します。
        });

CSS:

    ＃かぶせる {
      背景: url(../img/overlay_bg.png);
      位置:絶対;
      z-index:10;
    }

    #modalcontainer {
    位置:絶対;
        z-index:20;
    }

HTML: 

<a href="#modal1" class="modal button plain">view modal</a>
<div style="width:650px; height:400px;" id="modal1" class="modalbox">               
  <div class="box-header">
    <p  align="center">Here is your modal</p>
    <div class="box-content">

    </div>
    <div align="center" class="action_bar">              
      <a href="#" class="close button blue">Close</a>
    </div>
  </div>
    </div>​

jsfiddle でのデモ: http://jsfiddle.net/5Egf8/4/

? どんな助けでも大歓迎です。

4

2 に答える 2

1

更新: Fiddle が表示されたので、回答を修正しました。ここで作業フォークを参照してください: http://jsfiddle.net/JXHAt/3/

OK、三度目の魅力です。#modalcontainer を削除することで、これをはるかに簡単にしました。代わりに、 を表示する.modalboxには、現在の を非表示にしてから、表示するターゲット.modalbox-activeに追加.modalbox-activeします。

于 2012-05-01T06:45:27.007 に答える
1

最初の function() キーワードを削除します。私はあなたがそれを必要とは思わない:

$('body').prepend('');

$(window).resize(function(){       

// get the screen height and width  
var maskHeight = $(window).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop =  (maskHeight  - $('.modalbox').height())/2;  
var dialogLeft = (maskWidth - $('.modalbox').width())/2; 

// assign values to the overlay and dialog box
$('#overlay').css({ height:maskHeight, width:maskWidth }).show();
$('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show();
}).resize();
});

$('a.modal').each(function() {
      var link = $(this);
      var id = link.attr('href');
      var target = $(id);               

      if($("#modalcontainer " + id).length === 0) {
          $('#modalcontainer').append(target);
      }

      $("#main " + id).remove();

      link.click(function() {
        $('#modalcontainer > div').hide();        
        target.show();
        $('#overlay').show();
        return false;
      });
    });

    $('.close').click(function() {
      $('#modalcontainer > div').hide();
      $('#overlay').hide();

      return false;
    });​

次に、() と {} がすべて正しく並んでいることを確認します。幸運を！

于 2012-05-01T06:45:57.677 に答える