Question

我正在一个页面上处理多个全屏模态，但我似乎无法让它们淡入。相反，它们会在一定角度下滑入/滑出。我试图让它们只是淡入/淡出而不是滑动，但无济于事。

欢迎任何建议，谢谢。

HTML

public char mostCommonCharln(HashSet<String> dictionary){
    StringBuilder sb= new StringBuilder();
    //String allChars = sb.toString();
    String alph = "abcdefghijklmnopqrstuvwxyz";
    int[] counts= new int[26];
    String allChars =dictionary.stream().collect(Collectors.joining());
    for (int k = 0; k<allChars.length();k++){
        char ch = Character.toLowerCase(allChars.charAt(k));
        int dex = alph.indexOf(ch);
        if(dex != -1){
            counts[dex]+=1;
        }
    }
    int maxDex = 0;
    for (int i=0;i<counts.length;i++){
        if (counts[i]>counts[maxDex]){
            maxDex=i;
        }
    }
    char mostFreq=alph.charAt(maxDex);
    System.out.println (mostFreq);
    return mostFreq;
}

CSS

    <li> <a href="#" class="open" data-target='A1'>test1</a></li>
     <li> <a href="#" class="open" data-target='A2'>test2</a></li>     



<div class="container A1">
    <p>
        <a href="#" class="close">close</a>
    </p>
    <p class="changeText">
content 1
    </p>
</div>
<div class="container A2">
    <p>
        <a href="#" class="close">close</a>
    </p>
    <p class="changeText">
content 2 
    </p>
</div>
<div class="overlay"></div>

JS

.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    height:100%;
    width:100%;
    background:#000;
    filter:alpha(opacity=60);
    -moz-opacity:.60;
    opacity:.60;
    display:none;

}
.container {
    position:fixed!important;
    position:absolute;
    height:200px;
    width:400px;
    margin:-100px 0px 0px -200px;
    top: 50%;
    left: 50%;
    color:white;
    display:none;
    z-index:1002;
    padding:10px;
}

Answer 1

在.overlay上使用fadeIn

$('.overlay').fadeIn('slow',
    function() {
        $('.container.'+target).fadeIn('slow');
    }
);

和.container

$(this).parents('.container').fadeOut('slow',
    function() {
        $('.overlay').fadeOut();          
    }    
);

全屏莫代尔淡化不起作用

1 个答案: