article

کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)

javascript-pop-up

همان طور که در آموزش های قبل دیدیم، جاوا اسکریپت یک زبان کد نویسی سمت کاربر یا client-side  است به این معنی که در مرورگر کاربران اجرا شده و توسط مفسر آن پردازش می شود، به این دلیل در کنار مزیت هایی که دارد، محدودیت هایی نیز وجود خواهد داشت، از این رو است که در برنامه نویسی وب صرف تسلط بر یک زبان سمت کاربر یا سمت سرور کفایت نمی کند و برنامه نویس موفق کسی است که بتواند ترکیبی از این دو را به کار گیرد، به هر صورت در این آموزش می خواهیم شما را با یکی دیگر از قابلیت های پرکاربرد جاوا اسکریپت آشنا کنیم و آن استفاده از پنجره های Pop-up یا همان پنجره های کوچک نمایش پیام است که در چهار دسته پنجره های هشدار (alert)، پنجره های تایید (confirm)، پنجره نمایش لینک (window.open) و پنجره های عکس العملی (prompt) دسته بندی می شوند.

پنجره Pop-up چیست؟


قبل از هر چیز باید ببینیم که پنجره Pop-up چیست و چه کاربردی دارد؟
Pop-up در برنامه نویسی وب به پنجره های کوچکی گفته می شود که به صورت خودکار یا با دخالت کاربر در مرورگر نمایش داده می شوند، به طور مثال ممکن است تبلیغات یا پیام های خوش آمدگویی و ... را در صفحات وب دیده باشید، اکثر آنها بر مبنای جاوا اسکریپت هستند، یعنی وقتی که صفحه بارگذاری می شود کد جاوا اسکریپت اجرا شده و پنجره به نمایش در می آید یا ممکن است این اتفاق با کلیک کاربر یا بردن ماوس روی یک عنصر مشخص رخ دهد، پنجره های Pop-up در دسته GUI ها یا با واسط کاربری گرافیکی (Graphical User Interface) دسته بندی می شوند، بدین معنی که قابلیت تعامل با رفتارهای کاربر را نیز دارا می باشند.

دستور alert در جاوا اسکریپت


اولین دستوری که جزء خانواده Pop-up ها است، alert نام دارد، این دستور برای نمایش یک پیام در مرورگر به کار می رود و معمولا به همراه پیام، یک دکمه نیز جهت تایید به کاربر نشان داده می شود، از این گذشته عمده کاربرد alert برای برنامه نویسان وب است که می توانند به کمک آن خط به خط خروجی کدهای خود را خطایابی کنند، به طور مثال از یک آرایه یا متغیر با alert خروجی گرفته و از چند و چون و روند کارکرد کد خود مطلع شوند.
استفاده از این دستور بسیار ساده است که در زیر ملاحظه می کنید.
<script type="text/javascript">
alert("سلام! به آموزش جاوا اسکریپت خوش آمدید");
</script>
یک مثال کاربردی با alert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | دستور alert در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function getuser(name){
    alert(" سلام " + name + "!\n به آموزش جاوا اسکریپت خوش آمدید ");
}
</script>
<label for="name">نام شما:</label>
<input id="name" name="name" type="text" />
<input type="button" value="کلیک کنید" onclick="getuser(document.getElementById('name').value)" />
</body>
</html>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
توضیح:
- در کد بالا، یک تابع ساده نوشته ایم که با رویداد onclick مقادیر فیلد name را به عنوان آرگومان دریافت می کند و خروجی آن یک پیام Pop-up از نوع alert خواهد بود.
- برای بررسی این تابع کافی است نام یا عبارت مورد نظر خود را در فیلد مربوطه وارد کرده و بر روی دکمه کلیک کنید.
- برای ایجاد خطوط جدید در هنگام نمایش پیام از علامت بک اسلش  و حرف n استفاده می شود (n\).

دستور confirm در جاوا اسکریپت


پس از آشنایی با alert، نوبت به معرفی دستور دیگری از این خانواده است که confirm نام دارد، دستور confirm که به معنی تایید کردن و تصدیق کردن است، به فراخور نام خود برای این به کار می رود که کاربر انجام یا عدم انجام عملیاتی را تصدیق کند، بعد از اجرای این دستور در پنجره ای به صورت Pop-up به کاربر یک هشدار نشان داده می شود، اگر او دکمه ok را انتخاب کند، مقادیر 1 یا true برگردانده می شود و اگر دکمه cancel را کلیک کند، عدد صفر یا false بازگشت داده شده و عملیات لغو می شود، این قابلیت این امکان را به ما می دهد که در برنامه های خود در وب، ایده های خوبی پیاده کنیم، به طور مثال اگر سیستمی نوشته اید که در آن مدیر پیام هایی از کاربران دریافت می کند و حال می خواهد که پیام های ناخواسته را حذف کند، بهتر است برای جلوگیری از بروز اشتباهات احتمالی، از چنین دستوراتی برای تایید عملیات استفاده کنید، البته این روش تنها یک نوع از اطمینان سنجی است و بسته به ضرورت و هدف شما ممکن است از اطمینان سنجی سمت سرور نیز استفاده شود.
در تابع زیر به صورت کاربردی با دستور confirm آشنا می شویم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | دستور confirm در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function confirmed(){
    var check = confirm("آیا حذف این پیام را تایید می کنید؟");
    if (check == 1){
        document.getElementById('text').innerHTML = '';
        alert("پیام حذف شد");
    }
    else{
        document.getElementById('text').innerHTML = 'در صورت تایید، این پیام حذف خواهد شد';
        alert("حذف پیام لغو شد");
    }
}
</script>
<div id="text">در صورت تایید، این پیام حذف خواهد شد</div>
<input type="button" value="تایید" onclick="confirmed()" />
</body>
</html>
توضیح:
- در کد بالا یک تابع ساده با استفاده از دستور confirm نوشته ایم که با رویداد onclick اجرا می شود.
- سپس وقتی عملیات تابع به دستور confirm می رسد، یک پنجره به کاربر نشان داده شده و از او می خواهد که ادامه کار را تایید کند، اگر کاربر ok را انتخاب کند، مقادیر 1 یا true بازگردانده می شود و ادامه تابع اجرا می شود، همین طور اگر cancel را انتخاب کند، مقادیر صفر یا false بازگردانده می شود و قسمت else اجرا می شود.
- در این تابع به صورت فرضی از document.getElementById و innerHTML برای تغییر مقادیر بلاک text استفاده کرده ایم که صرفا جهت مثال و نمونه است، با آَشنایی با روند کار دستور confirm می توانید موارد مورد نظر خود را ایجاد کنید.

مثال کاربردی با دستور confirm


در مثال زیر با استفاده از دستور confirm از مطمئن بودن کاربر از ارسال یک فرم html اطمینان حاصل می کنیم، در اینجا تابع جاوا اسکریپتی ما در رویداد onsubmit یعنی هنگام ارسال فرم اجرا می شود.
<form action="#" method="post" onsubmit="return confirm('فرم ارسال شود؟');">
<input type="submit" value="ارسال" />
</form>
همان طور که ملاحظه می کنید، استفاده از جاوا اسکریپت به صورت خطی یا inline نیز ممکن است که در اینجا از این روش استفاده کرده ایم.

دستور window.open در جاوا اسکریپت


یکی دیگر از توابع هم خانواده دستورات Pop-up در جاوا اسکریپت، تابع و در واقع متد window.open است که می توان از آن برای فراخوانی یک لینک در صفحه ای جدید (یا همان صفحه) استفاده کرد، به فرض قسمت نظرات سایت یا وبلاگ را در یک پنجره جدید و کوچک نمایش داد، البته برخی مواقع از این امکان استفاده های نادرست نیز می شود، به طور مثال نمایش پنجره های تبلیغاتی ناخواسته به مخاطبان که عمدتا باعث به زحمت افتادن آنها می شود (هر چند مرورگرها معمولا اجرای خودکار پنجره های Pop-up با متد window.open را مسدود می کنند، اما معمولا نمایش پنجره با کلیک کاربر مجاز است)، به مثال زیر توجه کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد Pop-up در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function WinOpen(){
    var url = "https://webgoo.ir";

    window.open(url, 'وبگو | آموزش برنامه نویسی و مهارتهای وب', "height=600, width=800, resizable=1, left=0, top=0, status=1, scrollbars=yes");
}
</script>
<input type="button" value="پنجره جدید" onclick="WinOpen()" />
</body>
</html>
توضیح:
دستور window.open چند بخش اصلی و در واقع چند آرگومان اصلی دارد:
- آرگومان اول: آدرس لینک.
- آرگومان دوم: عنوان لینک یا تعیین نحوه باز شدن پنجره.
- آرگومان سوم: تنظیمات سفارشی.
- آرگومان چهارم: قابلیت replace جهت ذخیره آدرس جدید به صورت جداگانه یا دوباره نویسی آدرس جدید با آدرس صفحه فعلی در تاریخچه مرورگر (قابلیتی کاربردی نیست).
توضیح:
در قسمت اول دستور، آدرس url صفحه مورد نظر را وارد می کنیم، به فرض:
window.open('https://webgoo.ir');
برای آرگومان دوم می توان نام پنجره جدید یا نحوه باز شدن لینک را مشخص کرد (با یکی از مقادیر: blank_ برای نمایش در پنجره جدید، parent_ برای نمایش در فرم والد، self_ برای نمایش در همان پنجره، top_ پنجره جدید جایگزین تمام فرم ها می شود)، به فرض:
window.open('https://webgoo.ir', 'وبگو | آموزش برنامه نویسی و مهارتهای وب');
برای آرگومان سوم می توانیم از تنظیمات زیادی استفاده کنیم، برای جداسازی آنها از یک کاما (علامت ,) استفاده می کنیم، به فرض:
window.open('https://webgoo.ir', 'وبگو | آموزش برنامه نویسی و مهارتهای وب', 'width=800, height=600, resizable=1, left=0, top=0, location=1, menubar=1, scrollbars=1');
هر کدام از موارد تنظیم شده برای آرگومان سوم معرف یک امکان ویژه است، به فرض resizable این امکان را به کاربر می دهد تا اندازه پنجره جدید را تغییر دهد (با مقادیر 1 یا yes) یا این امکان از او سلب شود (با مقادیر 0 یا no) ، لیست تنظیمات پرکاربرد:
height: تعیین ارتفاع پنجره به پیکسل - مقدار پیش فرض: 100.
width: تعیین عرض پنجره به پیکسل - مقدار پیش فرض: 100.
left: تعیین میزان فاصله به پیکسل از سمت چپ مرورگر.
top: تعیین میزان فاصله به پیکسل از سمت بالای مرورگر.
location: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار آدرس - مقدار پیش فرض: yes
menubar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار منوی مرورگر - مقدار پیش فرض: yes
resizable: قابل تغییر بودن (با مقادیر 1 یا yes) یا غیر قابل تغییر بودن (با مقادیر 0 یا no) اندازه پنجره - مقدار پیش فرض: yes
scrollbars: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار اسکرول - مقدار پیش فرض: yes
status: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار وضعیت - مقدار پیش فرض: yes
titlebar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار عنوان - مقدار پیش فرض: yes
toolbar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار ابزار - مقدار پیش فرض: yes
آرگومان چهارم هم (با مقادیر true یا false) مشخص کننده حالت ایجاد تاریخچه جدید برای لینک فعلی (مقدار false) یا دوباره نویسی آدرس لینک جدید به جای آدرس لینک فعلی (مقدار true) در تاریخچه مرورگر را مشخص می کند.

دستور prompt در جاوا اسکریپت


آخرین دستوری که در این مطلب قصد پرداختن به آن را داریم، prompt یا عکس العمل نام دارد، البته این دستور یکی از قدیمی ترین دستورات جاوا اسکریپت است که از سال های دور (از سال 1990) تا کنون بوده و امروزه به ندرت در صفحات وب کاربرد دارد.
کارکرد این دستور به این نحو است که با اجرا شدن آن، یک پنجره به کاربر نشان داده می شود که یک سوال و یک فیلد متنی در آن وجود دارد، سپس عبارتی که کاربر در فیلد مورد نظر وارد می کند در ادامه تابع قابل استفاده است، در گذسته بیشتر و امروزه کم تر دیده ایم برخی صفحات شخصی یا وبلاگ ها را که در ابتدای ورود، نام کاربر را درخواست کرده و سپس به او یک پیام خوش آمدگویی نشان می دهند، این نوع کارها با prompt در جاوا اسکریپت انجام می شود، به مثال زیر توجه کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | دستور prompt در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function welcome(){
    var name = prompt("لطفا نام خود را وارد کنید","ناشناس");
    if (name != null && name != ''){
        alert(" سلام " + name + "! به آموزش جاوا اسکریپت خوش آمدید ");
    }
}
</script>
<input type="button" value="کلیک کنید" onclick="welcome()" />
</body>
</html>
توضیح:
- با اجرا شدن تابع فرضی welcome با رویداد onclick، دستور prompt اجرا شده و فیلد به کاربر نشان داده می شود.
- اگر دقت کنید عبارت "ناشناس" در کد بالا به عنوان مقادیر پیش فرض در فیلد مربوطه وجود دارد، این مقدار می تواند به صورت دلخواه یا خالی تنظیم شود.
- واضح است که به جای رویداد onclick اگر برای تگ body و در رویداد onload از prompt استفاده کنیم، با بارگذاری صفحه، پنجره به صورت خودکار نشان داده می شود.

مثال و پیش نمایش آنلاین


در زیر می توانید کد مثال ها و پیش نمایش آنلاین آنها را ملاحظه و بررسی کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد Pop-up در جاوا اسکریپت</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

دستور alert:<br /><br />
<script type="text/javascript">
//<![CDATA[
function getuser(name){
    alert(" سلام " + name + "!\n به آموزش جاوا اسکریپت خوش آمدید ");
}
//]]>
</script>
<label for="name">نام شما:</label>
<input id="name" name="name" type="text" />
<input type="button" value="کلیک کنید" onclick="getuser(document.getElementById('name').value)" />
<hr />
دستور confirm:<br /><br />
<script type="text/javascript">
//<![CDATA[
function confirmed(){
    var check = confirm("آیا حذف این پیام را تایید می کنید؟");
    if (check == 1){
        document.getElementById('text').innerHTML = '';
        alert("پیام حذف شد");
    }
    else{
        document.getElementById('text').innerHTML = 'در صورت تایید، این پیام حذف خواهد شد';
        alert("حذف پیام لغو شد");
    }
}
//]]>
</script>
<div id="text">در صورت تایید، این پیام حذف خواهد شد</div>
<input type="button" value="تایید" onclick="confirmed()" />
<hr />
دستور window.open:<br /><br />
<script type="text/javascript">
//<![CDATA[
function WinOpen(){
    var url = "https://webgoo.ir";

    window.open(url, 'وبگو | آموزش برنامه نویسی و مهارتهای وب', "height=600, width=800, resizable=1, left=0, top=0, status=1, scrollbars=yes");
}
//]]>
</script>
<input type="button" value="پنجره جدید" onclick="WinOpen()" />
<hr />
دستور prompt:<br /><br />
<script type="text/javascript">
//<![CDATA[
function welcome(){
    var name = prompt("لطفا نام خود را وارد کنید","ناشناس");
    if (name != null && name != ''){
        alert(" سلام " + name + "! به آموزش جاوا اسکریپت خوش آمدید ");
    }
}
//]]>
</script>
<input type="button" value="کلیک کنید" onclick="welcome()" />
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» رویدادها (Events) در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
commentنظرات (۴۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: امین
۱۸:۰۷ ۱۳۹۴/۱۰/۰۵
سلام استاد
من تو صفحه ام چندین رکورد دارم که هر رکورد دکمه ای داره که وقتی کاربر میزنه اطلاعات اون رکورد رو نشون میده.
حالا میخوام اون فرم دومی با pop up باز بشه..
اما مهم اینه که من id رو با روش post میفرستم به فرم دو.
با روش get بلدم چیکار کنم اما با post که میخوام بفرستم نمیشه .. آیا راهی وجود داره یا نه فقط باید با get آی دی رو به url اسکریپت بدم؟؟
پاسخ: 
سلام
امکان ارسال اطلاعات به صفحه جدید با متد POST وجود دارد، منتها معمولا کار با حالت GET ساده تر و متداول تر است و در مواقعی که دلیل خاصی بر استفاده از POST وجود ندارد، استفاده از GET مشکلی نخواهد داشت:
http://stackoverflow.com/questions/3951768/window-open-and-pass-parameters-by-post-method
نویسنده: مهدی ب
۰۶:۰۵ ۱۳۹۴/۱۰/۰۶
سلام عزیز
یه کد گالری عکس دارم میخوام اون رو توی صفحه جداگانه وبلاگم که واسه گالری هست قرار بدم همه کاراشو میکنم تنها مشکل اینه وقتی صفحه رو باز میکنم ازم کلیک میخواد تا گالری رو بصورت اسلاید شو نشون بده لطفا بفرمایید چیکار کنم تا صفحه گالریم باز شه خودکار و بدون کلیک گالریم باز شه
ممنون
پاسخ: 
سلام
حل این مشکل نیازمند بررسی دقیق سورس کدهای صفحه مورد نظر است، لذا درج آدرس صفحه جهت بررسی لازم است!
نویسنده: دارا
۱۳:۵۲ ۱۳۹۴/۱۰/۰۶
با عرضه سلام و خسته نباشید.
من میخاستم سوال کنم که برای کد که گذاشته اید برای آنکه میخواهم رنگ زمینه دکمه (اینجا کلیک کنید) را با قرار دادن کد رنگ و فونت آن را nazanin کنم چکار باید کنم؟
با تشکر فراوان
پاسخ: 
سلام
به طور خلاصه باید با بحث کلاس در CSS و اختصاص background آشنا باشید، همچنین برای فونت فارسی باید با نحوه استفاده از font-face در CSS آشنا باشید، آموزش های مربوطه در وب وجود دارند، کافی است عباراتی مانند "تنظیم رنگ دکمه با CSS" یا "استفاده از فونت فارسی در CSS" را جستجو کنید!
نکته: اکثر آموزش ها نیازمند آشنایی قبلی شما با CSS خواهند بود!
نویسنده: فرهاد لطفی
۱۱:۲۱ ۱۳۹۵/۰۲/۰۷
سلام
بدون مقدمه میرم سر اصل مطلب: میخوام وقتی موس روی یک تصویری در صفحه وب میرود، کادری بالای آن باز شود و چند گزینه نمایان شود و کاربر هرکدام را که مایل بود دانلود کند و برای دو عدد فایل مجبور به ایجاد یک صفحه نشوم که این اصلا خوب نیست.
ممنون میشوم اگر کمکی در حق این بنده حقیر بکنید.
با احترام
پاسخ: 
بدین منظور کدهای آماده زیادی وجود دارد، اما معمولا به تنهایی نمی توانند آنطور که باید به نحو دلخواه عمل کنند لذا الزاما باید با CSS و JavaScript آشنا باشید، ضمن اینکه بحث حاضر اگرچه می تواند مورد استفاده قرار گیرد، اما به نظر با هدف شما تطابق ندارد، یک نمونه کد و آموزش:
http://www.plus2net.com/javascript_tutorial/hide-layer.php
نویسنده: میرزاییان
۲۱:۳۵ ۱۳۹۵/۰۶/۳۱
با سلام و احترام محضرتان
لطفا در مورد نوشتن کد زیر ما را راهنمایی فرمایید
میخواهیم وقتی یک صفحه را کاربر باز میکند بعد از 5 ثانیه بصورت کاملا خودکار در زیر آن صفحه بصورت تمام صفحه بروی یک بنر داخل صفحه کلیک شود.
لطفا راهنمایی فرمایید با کد جاوا
windoe.open
و
set time out 
اگر بخواهیم بصورت واضح تر مطرح کنیم سوال را مثلا کابر صفحه 1 را باز کرد بعد از 5 ثانیه کد جاوا بروی یکی از بنر های داخل صفحه 1 کلیک کند و در صفحه جدیدی زیر صفحه 1 نشان دهد آن هم بصورت تمام صفحه.
پاسخ: 
تا آنجا که اطلاع داریم انجام چنین قابلیتی در مرورگرهای جدید (به علت اعمال محدودیت ها جهت حفظ امنیت و حریم خصوصی کاربران) عملا ممکن نیست و الزاما کاربر باید بر روی یکی از عناصر صفحه کلیک نماید!
نویسنده: زهرا
۱۳:۰۲ ۱۳۹۵/۰۸/۲۳
سلام. خسته نباشید. ممنونم از اطلاعات خوبتون.
من یک سوال دارم و ممنون می شم سریع جواب بگیرم.
من یک صفحه لیست کالا ها دارم، که اینها اسکرول می شن. من خوام هر موقع که روی هر کالا کلیک شد، پاپ اپ روی همون دایو باز شه و به صورت ثابت وسط صفحه نباشه.
موقعیت دایو بر اساس هر دایو کالا، تغییر کنه و روی همون دایو نمایش پیدا کنه.
چون اگه یک کالا ته اسکرول باشه، پاپ نمی خوام بالا نمایش پیدا کنه، می خوام همون قسمت اسکرول شده نمایش پیدا کنه.. ممنون می شم کمکم کنید.
پاسخ: 
قابلیت pop up مرورگر برای منظور شما مناسب نیست و نمی توانید فراتر از امکانات پیش فرض انتظار بیشتری داشته باشید، برای این منظور بهتر است از پنجره پاپ آپ سفارشی یا Tooltip (با CSS و HTML) استفاده کنید.
نویسنده: یاسین عباسی
۱۳:۴۴ ۱۳۹۵/۱۰/۲۷
سلام
چگونه میتوان اسکریپت alert را زمانبندی کرد یعنی مثلا در ۲۳ ماه ژانویه یک اسکریپت و در ۲۴ ماه ژانویه یک اسکریپت دیگر نمایش داده شود؟
پاسخ: 
باید با مبحث تاریخ و زمان در جاوا اسکریپت آشنا باشید و آن را با آموزش حاضر ترکیب کنید، مثال:
<script type="text/javascript">
function get2Digit(value){
var result;
switch(value){
case 0:
result = '00';
break;
case 1:
result = '01';
break;
case 2:
result = '02';
break;
case 3:
result = '03';
break;
case 4:
result = '04';
break;
case 5:
result = '05';
break;
case 6:
result = '06';
break;
case 7:
result = '07';
break;
case 8:
result = '08';
break;
case 9:
result = '09';
break;
}

return result;
}
var now = new Date();
var date_str = now.getFullYear() + ' ' + get2Digit(now.getMonth()) + ' ' + get2Digit(now.getDay());
var your_date = '20170023';
if(date_str == your_date){
alert(1);
} else{
alert(0);
}
</script>
نویسنده: سعیده
۰۲:۰۵ ۱۳۹۶/۰۷/۱۴
سلام خسته نباشید میخواستم بدونم برای نوشتن پاپ آپ برای تلگرام که همون اد اختیاری میگن میشه از مطالب بالا استفاده کرد یا مطالب فقط برای سایت قابل استفاده هست
پاسخ: 
اپلیکیشن تلگرام چنین قابلیتی ندارد مگر اینکه از طریق مرورگر این برنامه یک صفحه وب را فراخوانی کنید.
نویسنده: مجتبی
۱۰:۲۳ ۱۳۹۷/۰۵/۲۲
سلام
میخواستم با کلیک بر روی background modal به طور خودکار مودال بسته نشه
راه حلی وجود داره؟
پاسخ: 
بسته به روش ایجاد مودال راه حل متفاوت خواهد بود اما معمولا باید توابع جاوا اسکریپتی که در زمان کلیک کاربر در پس زمینه اجرا می شوند را ویرایش کنید، در صورت تمایل آدرس یک صفحه آنلاین را جهت بررسی بیشتر مودال مد نظر درج کنید.
نویسنده: ناصر عبدی
۰۱:۰۳ ۱۳۹۷/۱۱/۰۹
سلام من نياز به کدي دارم که با ادغام با کد تبليغاتي متغيير اين کارها را برام انجام دهد
1- با بالا آمدن صفحه وب يکي از لينک هايي که با هربار رفرش تغيير ميکنه بطور اتوماتيک کليک بخورد
2- بعد از کليک اتوماتيک صفحه اي مجزا بدون اذيت بازديد کننده وب باز شود
3- کد با مرورگرها مطرح مشکلي نداشته باشد
4- کد تبليغاتي متغيير که در سايت قرار ميدهم را هم اينجا ميزارم تا باهاش کار کنيد
حذف شد
پاسخ: 
متاسفانه چنین کدی در اختیار نداریم، باید در قالب سفارش با برنامه نویسان وب موضوع را مطرح کنید، ضمن اینکه استفاده از کدهای تبلیغی به شکل مد نظر و پنهانی به لحاظ اصول حرفه ای توصیه نمی شود!
نویسنده: Mahyar
۱۱:۴۸ ۱۳۹۸/۰۵/۱۹
سلام خسته نباشید
اگه بخواهیم که یک pop up با کلیک به خارج از کادر pop up یا کلیک به روی دکمه esc کامپیوتر بسته شود به چه صورت است
اگر پاسخ بدید ممنون میشم
پاسخ: 
برای بستن پنجره Pop-up نمونه کد زیر را در سورس آن درج کنید:
<script>
document.addEventListener('keydown', function(event) {
const key = event.keyCode;

if (key === 27) {
window.close();
}
});

document.onblur = function() {
window.close();
};
</script>
نویسنده: محمد
۱۶:۱۳ ۱۳۹۹/۰۷/۲۸
سلام. یک کد نوشته ام بدین صورت:
alert()
وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را کلیک می کنم باز پنجره پیام باز می شود و اصلا نمی رود چه کار کنم؟
پاسخ: 
در حالت معمول اگر یک بار پیام را تایید کنید نباید مجدد پنجره هشدار ظاهر شود مگر اینکه در کدهایتان یک دور تکرار (Loop) داشته باشید (به فرض استفاده از توابعی مانند setInterval) یا اینکه صفحه وب به هر دلیل (به طور مثال وجود پلاگینی خاص در مرورگر) مجددا فراخوانی شود.
نویسنده: محمد
۱۴:۵۰ ۱۳۹۹/۱۰/۲۰
سلام.
من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال بشه.
چجوری این کار رو بکنم؟
ممنون میشم.
پاسخ: 
تا آنجا که اطلاع داریم برای ارسال پیام باید وب سرویس ارسال پیامک داشته باشید که معمولا با کدهای PHP می توان به API آن متصل و متن را تنظیم و ارسال کرد، پس باید با جاوا اسکریپت یک درخواست Ajax به فایل PHP در سرور سایتتان داشته باشید و در نهایت با PHP پیام را به شماره مورد نظر ارسال کنید، در آموزش های مقدماتی Ajax نمونه کدهایی برای انجام این کار وجود دارد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





4 × 8
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form کوثر رحیمی
در:
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹

form متین
در:
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷

form روشنا
در:
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵

form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵

form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴

form سلام
در:
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴

form وطن
در:
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴

form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳

form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱

form باسلام
در:
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱

form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
form مجتهدزاده
در:
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...
۱۳۹۹/۱۰/۰۸
form مجتهدزاده
در:
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر
۱۳۹۹/۱۰/۰۶
form ali
در:
سلام چجوری میشه با php بازی هوب رو طراحی کرد
۱۳۹۹/۱۰/۰۶
form رضا
در:
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...
۱۳۹۹/۱۰/۰۶
form فرانک دستان
در:
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...
۱۳۹۹/۱۰/۰۵
form مصطفی
در:
سلام. عملگر @ چه زمانی قبل از یک متغییر میاد؟
۱۳۹۹/۱۰/۰۵
form سما
در:
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم
۱۳۹۹/۱۰/۰۵
form مجتبی
در:
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...
۱۳۹۹/۱۰/۰۵
form matin asadi
در:
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...
۱۳۹۹/۱۰/۰۲
form sahar1999
در:
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟
۱۳۹۹/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.