创建一个模态对话框 - 内容消失

我想做一个jQuery模态对话框。（请不要说“使用插件”）。创建一个模态对话框 - 内容消失

我清楚地知道，我现在用的JS是胡扯，一次我试图破解共同的基本功能，一旦我有基本的功能下降，我会改写这个作为一个jQuery插件，为我所用。

反正

我有弹出的对话框，并且它是在页面的中心，对话是由它的内容调整大小。

在此特定示例中，内容具有固定宽度。

我想处理的情况下，内容是更大的页面宽度。

我收到一个奇怪的问题，如果页面被调整大小的内容似乎刚刚被切断，没有滚动条。

可能是我的问题？

实施例：http://jsbin.com/egowo3/edit
CSS：

body { 
    padding: 0; 
    margin: 0; 
    color: #fff; 
} 

#overlay { 
    position:fixed; 
    width:100%; 
    height:100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 9999; 
    display: none; 
} 

#dialog { 
    display: none; 
    background: #000; 
    border: 1px solid #0000ff; 
    position: fixed; 
    z-index: 99999; 
} 

#test { 
    display: none; 
    width: 1300px; 
}

的Javascript

$(function(){ 
    $('button').click(function(){ 

    var body = $('body'); 
    var content = $('#test'); 
    var dialog = $('<div id="dialog"></div>'); 
    var overlay = $('<div id="overlay"></div>'); 

    var width = content.outerWidth(true); 
    var height = content.outerHeight(true); 

    body.prepend(dialog); 
    body.prepend(overlay); 
    dialog.prepend(content) 
      .height(height) 
      .width(width); 

    content.show(); 


    var left = (overlay.width()/2)-(dialog.outerWidth()/2); 
    var top = (overlay.height()/2)-(dialog.outerHeight()/2); 

    dialog.css({ 
     left : left, 
     top : top 
    }); 

    overlay.fadeIn('fast'); 
    dialog.fadeIn('fast'); 

    $(window).resize(function() { 
     overlay = $('#overlay'); 
     dialog = $('#dialog'); 

     if(overlay.length == 0 || dialog.length == 0) 
     return false; 

     var left = (overlay.width()/2)-(dialog.outerWidth()/2); 
    var top = (overlay.height()/2)-(dialog.outerHeight()/2); 

    dialog.css({ 
     left : left, 
     top : top 
    }); 

    }); 
    }); 
});

HTML

<body> 
    <button>Modal Me</button> 
    <div id="test"> 
    <p>Pid ac lundium urna tempor vut, elementum adipiscing mauris, magna cum odio! Urna pulvinar, et egestas magna diam mus porttitor natoque urna nisi turpis amet sed, etiam penatibus, nascetur cras lectus auctor? Nisi, elementum ac dictumst facilisis nec elementum ac? Placerat adipiscing? Dis montes cursus sagittis etiam et tortor ridiculus.</p> 
    <p>Nisi nec mid? Enim amet, enim rhoncus nisi penatibus nec, natoque amet placerat in in? Scelerisque magna, aliquam elit habitasse turpis parturient et facilisis urna adipiscing, porta hac nunc, sit pellentesque! In enim? Mus nunc risus amet sed tincidunt, hac placerat placerat diam, et et, sociis mid. Pellentesque, vel.</p> 
    </div> 
</body>

来源

2011-04-29 Hailwood

发生这种情况是因为您使用的是position: fixed，我很肯定会忽略页面边框。为什么不将元素的宽度与页面的宽度进行比较，并决定从那里采取何种行动？

if($("#dialog").width() > $(window).width()){ 
alert("Content will overflow the window."); 
}

来源

2011-04-29 00:36:29 mattsven

当您调整大小时，尽管您在初始化时设置了它，但决不会调整叠加框的宽度和高度。因此，你的CSS假设你想保持你的盒子的大小。尝试使用百分比来表示宽度和高度。

来源

2011-04-29 00:41:17

我确实想保留那个大小的盒子，我应该解释一下对不起，如果对话框比它大，我想要得到滚动条。这可能吗？ – Hailwood 2011-04-29 00:48:53

创建一个模态对话框 - 内容消失

回答

相关问题