|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<input type="button" class="box" name="mybutton" value="mybutton"> <input type="button" class="box" name="mybutton" value="mybutton"> <input type="button" class="box" name="mybutton" value="mybutton"> <p> <input type="button" class="box" name="mybutton" value="mybutton"> <div class="thewindow"><div>ZOOM<img src="left.png" class="thewindowclose"></div></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.box').click(function(){ $(".thewindow > div").html('<object data="http://aq.gthex.co.uk:10000" />'); var $t = $('.thewindow'), to = $(this).offset(), td = $(document); $('.thewindow').css({top: to.top + 50, left: to.left + 50, display: 'block'}) .animate({top: td.height()/2,left: td.width()/2}, 600, function(){ $(this).animate({ top: '-=20%', left: '-=20%'}, 600); $(this).children('div').animate({ width:650, height:500 }, 600, function(){ // open dialog here }); }); }); $('.thewindowclose').click(function(){ $('.thewindow').hide(); }); }); </script> <style> object { width: 100%; height: 100%; border-radius: 15px; } body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; } .box { background:#fff; margin:5px; width:100px; height:100px; float:left; } .thewindow { background:transparent; display:none; position:absolute; top:50%; left:50%; z-index:50; } .thewindow > div { background:#fff; border:1px solid #666; margin:-50px 0 0 -50px; width:100px; height:100px; border-radius: 15px; border-width: 4px; border-color: #8BC53F; } </style> |
