0

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 ではなく、モーダル ウィンドウのサイズを変更することもできません。私は何が欠けていますか？ありがとう

4

2 に答える 2

0

だから、あなたのコードを調べた後、これが私が思いついたものです...これがあなたが探していたものである場合は、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;
}​
于 2012-10-05T18:05:09.553 に答える
-1

HTMLのdiv宣言内に幅と高さを追加するだけで問題が解決することがわかりました。cssコードで使用したときに影響がなかった理由はまだわかりません。

コード：

<div id="dialog" class="window" style="width:800px;height:600px;">
于 2012-10-05T18:16:14.250 に答える