پنج‌شنبه ۲۹ مرداد ۱۴۰۵ |  عضویت / ورود

10 کد جاوا اسکریپت برتر طراحی popup در حالات مختلف


Thursday, 2007 April 19   نویسنده: Hamid   تعداد بازدید: 11139 بار  #آموزش جاوا اسکریپت - Java Script‏   امتیاز متوسط: 5

باز شدن صفحه جدید وقتی بر روی دکمه کلیک می کنید - بسته شدن صفحه جدید بنا به زمانی که شما میدهید.
کد HTML:
 copy to head: <script>
function winopen(){
        win = window.open("YOUR PAGE NAME", "newWin", "toolbar=yes,location=yes,directories=no,status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=260")
        startTime()
}

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=3; // Amount of time that the window stays open in seconds
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
                if (win.closed == false){
                        win.close()}}
        else{
                window.setTimeout("Timer()",1000)}
}
</script>
copy to body: <form><input type=button value="YOUR BUTTON DESCRIPTION" onClick="winopen();"></form>
صفحه نمونه: http://javascript.echessdesign.com/w...oses_timer.htm



باز شدن صفحه جدید وقتی که هوم پیج کاملا لود شد - بسته شدن صفحه جدید بنا به زمانی که شما میدهید.
کد HTML:
  کپی کنید در head:  <script>
function winopen(){
        win = window.open("YOUR PAGE NAME", "newWin", "toolbar=yes,location=yes,directories=no,status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=260")
        startTime()
}

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=3; // Amount of time that the window stays open in seconds
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
                if (win.closed == false){
                        win.close()}}
        else{
                window.setTimeout("Timer()",1000)}
}
</script>
کپی کنید در body:   <body onLoad="winopen()">
صفحه نمونه: http://javascript.echessdesign.com/windows/newwindow_when_enteringpage_closes_timer.htm

باز شدن صفحه جدید - بستن صفحه جدید:
کد HTML:
  کپی در body: <form NAME="winform">
  <p><input TYPE="button" VALUE="Open New Window"
  onClick="NewWin=window.open('http://www.echessdesign.com','NewWin',
'toolbar=no,status=no,width=200,height=100'); ">
  </p>
  <p><input TYPE="button" VALUE="Close New Window" onClick="NewWin.close();"> </p>
  <p><input TYPE="button" VALUE="Close Main Window" onClick="window.close();"> </p>
</form>
 صفحه نمونه: http://javascript.echessdesign.com/windows/windows_open_new_windows_close.htm


باز شدن صفحه جدید زمانی که موس شما بر روی لینک مورد نظر میرود - بستن صفحه جدید بر اساس زمانی که شما مشخص میکنید:
کد HTML:
  کپی در head: <style>
<!--
#wrapper{
position:relative;
height:30px
}

#wrapper2{
position:absolute
}

#coffeemenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}


-->
</style></HEAD>

<BODY>

<ilayer id="coffeemenu01" height=35px>
<layer id="coffeemenu02" visibility=show>
<span id="wrapper">
<span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font>
</span>
</span>
</layer>
</ilayer>

<script language="JavaScript1.2">


var enableeffect=true

var selection=new Array()
selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>'
selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>'
selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>'
selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>'
selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>'

if (document.layers)
document.coffeemenu01.document.coffeemenu02.visibility='show'

function dropit2(){
if (document.all){
coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (coffeemenu03.style.visibility=="hidden"){
if (enableeffect)
coffeemenu03.filters.revealTrans.apply()
coffeemenu03.style.visibility="visible"
if (enableeffect)
coffeemenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}

function dropit(e){
if (document.coffeemenu03.visibility=="hide")
document.coffeemenu03.visibility="show"
else
document.coffeemenu03.visibility="hide"
document.coffeemenu03.left=e.pageX-e.layerX
document.coffeemenu03.top=e.pageY-e.layerY+19
return false
}

function hidemenu(){
if (enableeffect)
coffeemenu03.filters.revealTrans.stop()
coffeemenu03.style.visibility="hidden"
}

function hidemenu2(){
document.coffeemenu03.visibility="hide"
}

if (document.layers){
document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK)
document.coffeemenu01.document.coffeemenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu

</script>

<div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
coffeemenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>

<script language="JavaScript1.2">
if (document.layers){
document.coffeemenu03.captureEvents(Event.CLICK)
document.coffeemenu03.onclick=hidemenu2
}
</script> 
 کپی در body:
<style>
<!--
#wrapper{
position:relative;
height:30px
}

#wrapper2{
position:absolute
}

#coffeemenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}


-->
</style></HEAD>

<BODY>

<ilayer id="coffeemenu01" height=35px>
<layer id="coffeemenu02" visibility=show>
<span id="wrapper">
<span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="notthisbrowser.html">Click Here To Navigate</a></b></font>
</span>
</span>
</layer>
</ilayer>

<script language="JavaScript1.2">


var enableeffect=true

var selection=new Array()
selection[0]='<font face="ARIAL BLACK"><a href="http://www.coffeecup.com">Order Our Stuff</a><br>'
selection[1]='<a href="http://www.coffeecup.com">Contact Us via E-mail</a><br>'
selection[2]='<a href="http://www.coffeecup.com">Help With Our Items</a><br>'
selection[3]='<a href="http://www.coffeecup.com">Products We Have</a><br>'
selection[4]='<a href="http://www.coffeecup.com">Services We Offer</a><br></font>'

if (document.layers)
document.coffeemenu01.document.coffeemenu02.visibility='show'

function dropit2(){
if (document.all){
coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (coffeemenu03.style.visibility=="hidden"){
if (enableeffect)
coffeemenu03.filters.revealTrans.apply()
coffeemenu03.style.visibility="visible"
if (enableeffect)
coffeemenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}

function dropit(e){
if (document.coffeemenu03.visibility=="hide")
document.coffeemenu03.visibility="show"
else
document.coffeemenu03.visibility="hide"
document.coffeemenu03.left=e.pageX-e.layerX
document.coffeemenu03.top=e.pageY-e.layerY+19
return false
}

function hidemenu(){
if (enableeffect)
coffeemenu03.filters.revealTrans.stop()
coffeemenu03.style.visibility="hidden"
}

function hidemenu2(){
document.coffeemenu03.visibility="hide"
}

if (document.layers){
document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK)
document.coffeemenu01.document.coffeemenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu

</script>

<div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:200;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
coffeemenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>

<script language="JavaScript1.2">
if (document.layers){
document.coffeemenu03.captureEvents(Event.CLICK)
document.coffeemenu03.onclick=hidemenu2
}
</script>
نمونه صفحه: http://javascript.echessdesign.com/windows/newwindow_when_mouse_movedover_link_closes_timer.htm



باز شدن صفحه جدید زمانی که موس شما بر روی عکس مورد نظر میرود - بستن صفحه جدید بر اساس زمانی که شما مشخص میکنید:
کد HTML:
   کپی در head:  <script>
function winopen(){
        win = window.open("YOUR PAGE NAME", "newWin", "toolbar=yes,location=yes,directories=no,status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=260")
        startTime()
}

function startTime(){

        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=3; // Amount of time that the window stays open in seconds
        Timer();

}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if (curTime>=closeTime){
                if (win.closed == false){
                        win.close()}}
        else{
                window.setTimeout("Timer()",1000)}
}
</script>
کپی در body:  <a href="" onMouseOver="winopen();return false;"><img src="YOUR IMAGE FILE" border=0></a>

نمونه صفحه:  http://javascript.echessdesign.com/windows/newwindow_when_mouse_movedover_image_closes_timer.htm



باز شدن صفحه جدید زمانی که موس بر روی لینک مورد نظر میرود - بستن صفحه جدید زمانی که موس از روی لینک مورد نظر میرود
کد HTML:
    کپی در head:  <script Language="JavaScript">
function winopen () {
msg=open("http://www.echessdeisgn.com","NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=400");
msg.location = "index.htm"
}
</script>

کپی در body:  <a href="" onMouseOver="winopen(); return true;">freejava</a>

نمونه صفحه:  http://javascript.echessdesign.com/windows/opens_windows_while_mouseover_text_closes_when_notontext.htm


باز شدن یک صفحه جدید (PopUp) زمانی که شما بر روی لینک کلیک می کنید
کد HTML:
   کپی در body: <a href="http://freejava.i8.com" ONCLICK="window.open('blank1.htm', 'NewWindow','toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=635,height=260')">freejava.i8.com</a>

نمونه صفحه: http://javascript.echessdesign.com/windows/loads_newpage_open_popup_window_withlink.htm


باز شدن دو صفحه جدید (PopUp) زمانی که شما بر روی لینک کلیک می کنید
کد HTML:
  کپی در head: <script language="JavaScript">
function winopen(){
        window.open('http://www.echessdeisgn.com', 'NewWindow1', 'toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=635,height=260')
        window.open('http://www.echessdeisgn.com', 'NewWindow2', 'toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=635,height=260')
}
</script>
کپی در body: <a href="PARENT WINDOW LOCATION" ONCLICK="winopen()">LINK DESCRIPTION</a>

نمونه صفحه:  http://javascript.echessdesign.com/windows/loads_newpage_opens2popup_window_withlink.htm


باز شدن صفحه جدید به صورت full screen زمانی که بر روی لینک کلیک می شود - بستن صفحه جدید با کلیک بر روی لینک:
کد HTML:
   گپی در head: <SCRIPT LANGUAGE="JavaScript">

<!-- Begin

/*
In the url, it's generally best to use a *relative* address
to your content page with this script; otherwise, IE loses
its sense of "parentage" over the window, and may throw
errors on attempts to relaunch when the fullscreen window is 
already open.
*/

// set the page to go to...
url = "yourpage.html";

// set how fast to expand horizontally
// lower is slower
var speedX = 7;

// set how fast to expand vertically
// lower is slower
var speedY = 5; 

// set background color of "Loading..." screen
var bgColor = "#000000";

// set text color of "Loading..." screen
var txtColor = "#FF80000";

// do not edit below this line
// ---------------------------
if (document.all) {
var wide = window.screen.availWidth;
var high = window.screen.availHeight;
}
function andBoom() {
if (document.all) {
var Boomer = window.open("","BoomWindow","fullscreen");
Boomer.document.write('<HTML><BODY BGCOLOR='+bgColor+' SCROLL=NO><FONT FACE=ARIAL COLOR='+txtColor+'>Loading...</FONT></BODY></HTML>');
Boomer.focus();
for (H=1; H<high; H+= speedY) {
Boomer.resizeTo(1,H);
}
for (W=1; W<wide; W+= speedX) {
Boomer.resizeTo(W,H);
}
Boomer.location = url;
}  
else {
window.open(url,"BoomWindow","");
   }
}
//  End -->
</script>

 کپی در body: <a href="javascript:andBoom()">Click Here To Launch Page</a>

Be sure that the page you link to has a link to close the window:  <a href="javascript:window.close();">Close Window</a>

صفحه نمونه: http://javascript.echessdesign.com/windows/farewell_window_launcher.htm




.


ارسال سؤال یا نظر

1- rasool:
بوسیله: , در: Thursday, 2010 April 15-کد: 1549
فوق العاده

2- rahmani:
بوسیله: , در: Thursday, 2011 March 03-کد: 2946
هنوز نخوندم اما فكر مي كنم خوبه بهر حال از لطفتون بسيار متشكرم.

Tutorials ©