pcusta_99 Posted January 20, 2012 Share Posted January 20, 2012 (edited) [font="Century Gothic"][size="3"]Meraba arkadaşlar. Ben sitemde bir butona tıklayınca sayfanın kararmasını istiyorum (tamamen değil, şeffaflık olacak) mesela Dailymotion'da ampule tıkladığımızda sayfa kararıyor onun gibi ama burada tüm sayfa kararacak ve pencere falan açılamayacak. Bu koddaki gibi, sadece bu kodda otomatik açılıyor ve ardından bir dialogta geliyor. Umarım ki dediklerimi anlamışsınızdır. Yardımcı olan arkadaşlara şimdiden teşekkürler.[/size][/font] Kod: [quote][spoiler][quote][html]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.; //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(2000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> <style type="text/css"> body {font-family:verdana;font-size:15px;} a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none;} #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px;} #boxes #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff;}</style> <h2><a href="http://www.queness.com/">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2> <div style="font-size: 10px; color: rgb(204, 204, 204);">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> Simple Modal Window | <a href="#" class="close">Close it</a> </div> <!-- Mask to cover the whole screen --> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> [/html] [/quote] [/spoiler][/quote] Edited January 20, 2012 by pcusta_99 Quote Link to comment Share on other sites More sharing options...
galetis Posted January 20, 2012 Share Posted January 20, 2012 [codebox] <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function karart(){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.; } </script> <style type="text/css"> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none;} </style> <input type="button" value="Karart" onclick="karart()" /> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> [/codebox] Quote Link to comment Share on other sites More sharing options...
pcusta_99 Posted January 20, 2012 Author Share Posted January 20, 2012 (edited) [font="Century Gothic"][size="3"][color="#000000"][u]@[/u][/color][/size][/font][font="Century Gothic"][size="3"][member='galetis'] Öncelikle teşekkürler. Ben kodu kendime göre bu şekilde uyarladım ama sayfa kararmıyor, sadece istediğim uyarı mesajı çıkıyor: [quote][spoiler][quote][php]<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function warning(){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.; alert("Uyarı mesajı !"); location.href='http://www.siteadresi.com/' } </script> <style type="text/css"> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none;} </style> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <title>Site Başlığı</title> </head> <body onLoad="warning()"> </body> </html>[/php][/quote][/spoiler][/quote] [/size][/font] Edited January 20, 2012 by pcusta_99 Quote Link to comment Share on other sites More sharing options...
galetis Posted January 20, 2012 Share Posted January 20, 2012 Mask divini body tagları arasına eklemen lazım [codebox] <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function warning(){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.; alert("Uyarı mesajı !"); location.href='http://www.siteadresi.com/' } </script> <style type="text/css"> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none;} </style> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <title>Site Başlığı</title> </head> <body onLoad="warning()"> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </body> </html> [/codebox] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.