0

別のポップアップ内にポップアップを作成しました。ここに私のコードがあります、

<html>
<head>
    <title>Popup</title>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //open popup
            $("#pop").click(function(){
              $("#background").css({"opacity" : "0.7"}).fadeIn("slow");    
              $("#overlay_form").fadeIn(1000);                              
              positionPopup();                  
            });
            $("#plus").click(function(){
              $("#background").css({"opacity" : "0.7"}).fadeIn("slow"); 
      $("#overlay_form").css({"opacity" : "0.7"}).fadeIn("slow");      
              $("#inner_form").fadeIn(1000);                              
              positionPopup();                  
            });
            //close popup
            $("#close").click(function(){
                $("#overlay_form").fadeOut(500);
                $("#background").fadeOut("slow");    
        document.getElementById("loc").value="";
        document.getElementById("uname").value="";
            });
            $("#innerclose").click(function(){
                $("#inner_form").fadeOut(500);  
        $("#overlay_form").fadeIn(500);     
        var newloc=document.getElementById("nloc").value;
        document.getElementById("loc").value=newloc;
        document.getElementById("nloc").value="";   
            });
        });
        //position the popup at the center of the page
        function positionPopup(){
              if(!$("#overlay_form").is(':visible')){
                return;
              } 
              $("#overlay_form").css({
                  left: ($(window).width() - $('#overlay_form').width()) / 2,
                  top: ($(window).width() - $('#overlay_form').width()) / 7,
                  position:'absolute'
              });
      $("#inner_form").css({
                  left: ($(window).width() - $('#inner_form').width()) / 2,
                  top: ($(window).width() - $('#inner_form').width()) / 5,
                  position:'absolute'
              });           
        }
        //maintain the popup at center of the page when browser resized
        $(window).bind('resize',positionPopup);
    </script>
    <style>
        #background{
            display: none;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background: #000000;
            z-index: 1;
        }
        #overlay_form{
         position: absolute;
         border: 5px solid gray;
         padding: 10px;
         background: white;
         width: 270px;
         height: auto;  
             z-index:10;  
        }   
         #inner_form{
         position: absolute;
         border: 5px solid gray;
         padding: 10px;
         background: white;
         width: 250px;
         height: auto;  
             z-index:12;  
        }       
        #pop{
        display: block;
        border: 1px solid gray;
        width: 65px;
            height: auto;
        text-align: center;
        padding: 6px;
        border-radius: 5px;
        text-decoration: none;
        margin: 0 auto;                
        }
    </style>
</head>
<body> 
<div id="background"></div>
<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
    <label>Name</label><input type="text" name="uname" id="uname" /><br/><br/>
    <label>Location</label><input type="text" name="loc" id="loc" /><a href="#" id="plus" style="text-decoration:none;"> + </a><br/> <br/>
    <a href="#" id="close">Close</a>      
</form>  
<form id="inner_form" style="display:none"> 
 <label>New Location</label><input type="text" name="nloc" id="nloc" />
 <a href="#" id="innerclose">Close</a>  
</form> 
</body>

これで、内側のポップアップを閉じた後、外側のポップアップを明るい色で表示したいと思います。外側のポップアップが近い場合、ブラウザ ウィンドウは明るく表示されます。

4

1 に答える 1

1

ここにフィドルがあります。私が正しく理解していれば、問題は修正されるはずです。

追加したのは$("#overlay_form").css({"opacity" : "1"}).fadeIn("slow");、$("#innerclose")のクリック コールバックだけです。

于 2012-12-20T11:09:23.087 に答える