SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery popup with auto center,width and height

    I have three popups to show on a same page.

    (1) when I click any of the above three, the popup should display at the center of the browser automatically and the position, width(auto), height(auto) should be similar for all the popups and it should not differ.

    (2) I need to adjust the opacity of my background where it shouldn't allow me to operate anything at the backend until I close the popup, but right now I could see some of the div borders, images, buttons at the background when I open popup .

    I need something like this : http://www.joomdle.com/en/forum/r09-...joomdle-joomla (in discussion 4)
    I would appreciate your help. Here is my code

    Code HTML4Strict:
    <html> 
     <head>
       <script src="../../../js/jqueryv1.10.2.js"></script>
       <script>
        $(document).ready(function() 
        {       
          $('.wings').click(function(event) 
          {
            $(this).next('.popupbox').fadeIn("slow");
            $('body').css('background','#333');
            //$("body").css({ "background":"#333", "opacity":"0.4","filter":"alpha(opacity=40)" });
          });
     
           $('.popupclose').click(function(event) 
           {            
               unloadPopupBox();
               $('body').css('background','white');
           });     
     
           function unloadPopupBox() 
           {
              $('.popupbox').fadeOut("normal");       
           }  
           $(".popupbox").hide();
        });
       </script>
       <style>
        .container {font-family:verdana; font-size:13px; margin:0px auto; width:1200px; }
        .popupbox { position:center; background:#FFFFFF;  z-index:100px; -moz-box-shadow: 0 0 5px lightgray; -webkit-box-shadow: 0 0 5px lightgray; 
                    box-shadow:0 0 5px lightgray; display:none; min-width:100%; min-height:100%; overflow:auto;}    
        .popupclose { border:0px solid lightgray; color:#6FA5E2; line-height:15px; float:right; cursor:pointer; text-decoration:none; }
       </style>
     </head>
     
     <body> 
     
      <div class="container">
     
        <!-- popup1-->
         <a class="wings" style="background:#8AC007;color:#FFF;font-weight:bold;">Popup1</a>
         <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>  
         <img src="train.jpg"/>     
         </div>
        <!-- popup1-->    
     
        <!-- popup2-->
        <div style="margin-top:10px;">
          <input type="button" class="wings" value="Popup2"/>
          <div class="popupbox">
          <div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>
           <table>
            <tr><td>USERNAME : </td><td><input type="text" size="30%"></td></tr>
            <tr><td>PASSWORD : </td><td><input type="password" size="30%"></td></tr>      
            <tr><td><input type="submit" value="LOGIN"></td></tr>
           </table> 
        </div>  
        <!-- popup2-->  
     
        <!-- popup3-->
        <div style="margin-top:10px;">      
          <p class="wings">click on the image to view big screen</div>    
          <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>       
          <div><img class="wings" src="god.jpg"/></div>
        </div>  
        <!-- popup3-->
       </div><!--container-->
     
     </body>
    </html>
    Last edited by guido2004; Feb 27, 2014 at 07:48. Reason: added html tags


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •