10 کد برتر طراحی popup در حالات مختلف- حتما یه نگاهی بندازید, چیزی که می خواین توش هس

echessdesign

echessdesign

مدیر انجمن طراحی وب
باز شدن صفحه جدید وقتی بر روی دکمه کلیک می کنید - بسته شدن صفحه جدید بنا به زمانی که شما میدهید.
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/windows/newwindow_when_buttonclicked _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:   <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



دوستان عزیز. شما می توانید تمام سورس های جا وا اسکریپت را به راحتی از سایت زیر دانلود کنید:
http://javascript.echessdesign.com
 
M

marich

New Member
سلام من وقتی با فتوشاب عکسی رو درست می کنم با هر فمتری که بگین سیو می کنم ولی
وقتی می خوام توی ای دیم بزارم نمی یاد باید چه کارم حتی نمی تونم بزارم توی دکستاپ
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا