Question

CSS：

#mask {
    position: absolute;
    z-index: 9000;
    background-color: #000;
    display: none;          
}
#boxes .window {
    position: fixed;
    width: 800px;
    height: 600px;
}   
#boxes #dialog {
    background: #f2f2f2 url('App_Themes/prompt_panel_gradient.png') top left repeat-x;           
    width: 800px;
    height: 600px;
}

HTML：

<div id="boxes">
    <div id="dialog" class="window">
        <b>Testing modal window</b> |
        <a href="#" class="close">Close it</a>            
    </div>
    <div id="mask">
    </div>
</div>

使用Javascript：

<script type="text/javascript">
$(document).ready(function() {

$('a[name=modal]').click(function(e) {
    //Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');

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

//Set height and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });

//transition effect     
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow", 0.9);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);                

    //transition effect
    $(id).fadeIn(500);
});

//if close button is clicked
    $('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
        $('#mask, .window').hide();
    });

    $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
    });
});

</script>

一切正常，模态窗口打开背景图片，链接工作正常，但尺寸不是800x600也不能改变模态窗口的大小。我错过了什么？感谢

Answer 1

所以，在查看了你的代码之后，这就是我想出来的......如果这是你想要的，你可能想看看jQuery选择器以及它们是如何工作的......

http://jsfiddle.net/Mutmatt/Mr5Qe/8/

JS：

$('a.close').click(function(e) {//Note this gets the 'a' with the class (dot notation) 'close'
    //Cancel the link behavior
    e.preventDefault();
    //Get the A tag
    var id = $(this).attr('href');

    //Get the screen height and width
    var maskHeight = $(this).parent().height();//this ('a' with 'close' class) parent (dialog div)
    var maskWidth = $(this).parent().width();
    console.log("Mask Height [" + maskHeight + "]");
    console.log("Mask Width [" + maskWidth + "]");

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({
        'width': maskWidth,
        'height': maskHeight
    });

    //transition effect     
    $('#mask').fadeIn(500);
    $('#mask').fadeTo("slow", 0.9);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);

    //transition effect
    $(id).fadeIn(500);
});

//if close button is clicked
$('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();
    $('#mask, .window').hide();
});

$('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
});

HTML

<div id="boxes">
    <div id="dialog" class="window">
        <b>Testing modal window</b> |
        <a href="#" class="close">Close it</a>            
    </div>
    <div id="mask">
    </div>
</div>

CSS：

#mask {
    position: absolute;
    z-index: 9000;
    background-color: #000;
    display: none;          
}
#boxes .window {
    position: fixed;
    width: 800px;
    height: 600px;
}   
#boxes #dialog {
    background: #f2f2f2 top left repeat-x;           
    width: 800px;
    height: 600px;
}

Answer 2

我发现只需在html中的div声明中添加宽度和高度就可以解决问题。我仍然不确定为什么它在css代码中使用时没有任何影响。

代码：

<div id="dialog" class="window" style="width:800px;height:600px;">

无法调整JQuery模式窗口的大小

2 个答案: