页面加载时显示模态框

Question

页面加载时显示模态框

3

你好，我编写了以下 JavaScript 以使动态创建的 ID 标签的模态框能够通过调整大小功能垂直居中显示在屏幕上（无论其宽度和高度如何）。

但是，在页面加载时，模态框会显示出来，而不是通过单击按钮的方式显示。我是新手，所以不知道我需要在代码中做什么修改，以便在页面加载时将模态框隐藏。

Javascript:

    $('body').prepend('');
 $(function(){
        $(window).resize(function(){
// 获取屏幕的高度和宽度
    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 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;
        });

CSS：

    #overlay {
      background: url(../img/overlay_bg.png);
      position:absolute;
      z-index:10;
    }
#modalcontainer {
    position:absolute;
        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/

非常感谢您的帮助。

注：该内容是请求查看演示并表示感激之意。

- Elijah Paul

如果你正在使用 jQuery，为什么不尝试一下 JQuery UI 呢？它提供了一个现成的 jQuery 对话框界面，可以高度自定义。请访问 http://jqueryui.com/demos/dialog/ 查看详情。 - frictionlesspulley

2个回答

1

更新：现在我可以看到你的 Fiddle，我已经修改了我的答案。请查看这里的工作复制品：http://jsfiddle.net/JXHAt/3/

好的，第三次就是迷人的。我通过消除 #modalcontainer 让这个过程变得更加容易。相反，要显示一个 .modalbox，你只需要隐藏当前的 .modalbox-active，然后将 .modalbox-active 添加到你想要显示的目标中。

- moribvndvs

嘿，谢谢你的回复。我尝试将这个添加到CSS中，但没有帮助！我在想是否需要在某个地方添加/删除.hide()或.show()？附：已添加HTML和jsfiddle链接。 - Elijah Paul

太好了。我会看看能否将您的更新和建议实现到我的项目中。再次感谢您。这让我在过去几天里筋疲力尽！ - Elijah Paul

你好，我一直在尝试将你的解决方案应用到我的项目中，但是并没有取得太大的成功。我理解了你在fiddle中提出的逻辑，并且知道它是如何工作的。但是在我的项目中，点击“查看模态框”按钮会在新页面中打开链接，而不是触发模态框。 - Elijah Paul

好的。最终成功让我的模态框正常运作了。再次感谢你的帮助。 - Elijah Paul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gazzini · Accepted Answer

移除第一个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;
    });

然后确保你所有的()和{}都正确对齐。祝好运！