3

嗨，我编写了以下 javascript 来启用具有动态创建的 id 标签的模式，通过调整大小功能（无论它们的宽度和高度）定位在屏幕中央。

但是，在页面加载时，模式会显示，而不是onClick通过按钮显示。我是一个菜鸟，所以我不确定我必须在我的代码中改变什么，所以模式在页面加载时被隐藏了。

Javascript：

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

    $(函数(){
        $(窗口).resize(函数(){       

    // 获取屏幕高度和宽度  
    var maskHeight = $(window).height();  
    var maskWidth = $(window).width();

    // 计算居中对齐的值
    var dialogTop = (maskHeight - $('.modalbox').height())/2;  
    var dialogLeft = (maskWidth - $('.modalbox').width())/2;

    // 为覆盖层和对话框赋值
    $('#overlay').css({ height:maskHeight, width:maskWidth }).show();
    $('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show();
    }).resize();
    });

    $('a.modal').each(function() {
          var 链接 = $(this);
          var id = link.attr('href');
          变量目标 = $(id);               

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

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

          链接。点击（函数（）{
            $('#modalcontainer > div').hide();        
            目标.show();
            $('#overlay').show();
            返回假；
          });
        });

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

          返回假；
        });​

CSS：

    #覆盖{
      背景：网址（../img/overlay_bg.png）；
      位置：绝对；
      z指数：10；
    }

    #modalcontainer {
    位置：绝对；
        z指数：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

更新：现在我可以看到你的小提琴，我已经修改了我的答案。在这里查看工作分叉：http: //jsfiddle.net/JXHAt/3/

好的，第三次是魅力。通过消除#modalcontainer，我使这变得容易多了。相反，要显示 a .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 回答