10 کد جاوا اسکریپت برتر طراحی popup در حالات مختلف
باز شدن صفحه جدید وقتی بر روی دکمه کلیک می کنید - بسته شدن صفحه جدید بنا به زمانی که شما میدهید.
کد 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
.
ارسال سؤال یا نظر
English
العربی
Swedish
François