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 مطالب بیشتر:
» توابع (Functions) در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
» دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
commentنظرات (۴۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: پرنده غریب
۲۲:۱۲ ۱۳۹۳/۰۳/۱۳
ببخشید سوال دیگه ای هم داشتم اینکه من پنل سایتم کد پاپ اپ معمولی رو قبول نمیکنه و من از نوعی پاپ اپ استفاده میکنم که کمی فرق داره نوع دوم گمونم تفاوتش در این هاست " ' نمیدونم مشکل چیه کلی کد دارم که ثبت نمیکنه قسمت کدهام میشه راهنماییم کنید چیکار کنم مرسی اولی این رو داره " و دومی گمونم ' در کد استفاده شده مرسی و خسته نباشید
پاسخ: 
به نظر برنامه نویسی سیستم مدیریت سایتتان ایرادی دارد و قادر به پردازش صحیح اطلاعات ورودی نیست، حل این مشکل بدون دیدن سورس کدها و آزمایش و خطا عملی نیست.
نویسنده: محمدرضاکریمی
۰۸:۰۲ ۱۳۹۳/۰۴/۲۰
با سلام و تشکر از سایت خوبتون
می خواستم بپرسم چرا شما هیچ آموزشی در مورد jQuery ندارید؟
میشه در مورد پنجره های پاپ در جی کوئری هم توضیح بدید؟
البته اگه بدون استفاده از پلاگین باشه خیلی بهتره
پاسخ: 
سلام
جی کئوری یک فریم ورک حجیم است که بیشتر آموزش های آن به نحوه استفاده از کدهای آماده محدود می شود!
بد یا خوب، اعتقاد ما همیشه به استفاده از زبان های ساده (pure) یا فریم ورک های شخصی است.
نویسنده: راتین
۱۳:۲۹ ۱۳۹۳/۰۵/۰۵
مطلب خوبی بودش ممنون
میتونم تو سایتم استفاده کنم ازش ؟؟؟
پاسخ: 
دوست گرامی در قسمت فوتر سایت، توضیح کپی رایت عنوان شده، لطفا در صورت کپی برداری لینک به منبع اصلی درج شود.
نویسنده: احمد
۰۵:۱۸ ۱۳۹۳/۰۵/۲۵
سلام میشه کمک کنید خیلی ضروریه !!!
من با juery , java و البته php محتوای یک تگ رو میخواستم رو همون صفحه وب مخفی نگه دارم بعد با زدن یک دکمه اون تگ بصورت یک پنجره بروی صفحه ظاهر بشه
این کار رو کردم اما مشکل اینجاست که میخوام با زدن نام هر شخص کالاهای اون شخص نمایش داده بشه و نیاز دارم که به اون تگ آی دی شخص رو بفرستم اما نمیدونم چطور میشه اینکار رو کرد.. چون من در نمایش افراد از حلقه while استفاده کردم در اون تگ مخفی بخوام از آیدی افراد استفاده کنم آی دی آخرین شخص رو میده.
لطفا راهنمایی کنید
ممنون.
پاسخ: 
سلام
این گونه مشکلات با صرف نوشتن شرح ماجرا قابل حل نیست، با قرار دادن آدرس یک نمونه صفحه (به صورت آنلاین) مشکلتان را توضیح دهید!
نویسنده: عطا
۲۳:۳۸ ۱۳۹۳/۰۵/۲۷
سلام
ازتون یه کمک میخوام و اون اینکه چطور میشه پنجره پاپ آپی که از نوع آلرت هست رو بلاک کرد که نمایش داده نشه.
نمیدونم منظورم رو متوجه میشید یا نه.
میخوام بدونم چکار کنم که در یک سایتی که باز میکنم از ابتدا به فرض پیام خوش آمدگویی سایت در مرورگر من بلاک شود.
در ضمن هیچگونه آشنایی هم وبلاگ نویسی و ... ندارم.
اگر هم نمیخواهید سوالم در بخش نظرات ثبت شود لطفا جواب را برایم ایمیل کنید.
اگر کمکم کنید خیلی خیلی ممنون و سپاسگذار میشم
پاسخ: 
سلام
ساده ترین راه حل غیر فعال کردن جاوا اسکریپت در مرورگر است!
راه حل دیگر استفاده از افزونه های موجود برای مرورگرها است که می توانید از سایت سازنده مرورگر دریافت و نصب نمائید، به طور مثال افزونه Adblock Plus Pop-up Addon در فایرفاکس:
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus-pop-up-addon/
راه حل دیگر افزایش حالت امنیتی مرورگر از بخش تنظیمات به طور مثال در مرورگر IE است.
نویسنده: faramarz
۲۰:۳۶ ۱۳۹۳/۰۶/۰۶
با سلام و تشکر
یک سوال فنی
می خواهم برای صفحه دریافت اطلاعات ورود (لاگین) کاری کنم وقتی بازدید کننده روی دکمه کلیک کرد در همون صفحه یک پنجره باز شه و اطلاعاتش و بگیره
ممنون میشم راهنمایی کنید
اصلاً چیزی پیدا نکردم شاید کلمه مناسبی هم جستجو نکردم خلاصه اگه راهنمایی کنی خیلی سپاسگذار میشیم
پاسخ: 
سلام
حالت مد نظر شما در واقع یک فرم است که می تواند در ابتدا مخفی باشد، سپس با کلیک ظاهر شده که این قسمت باید با جاوا اسکریپت و CSS یا جی کئوری و CSS طراحی شود.
http://www.sitepoint.com/10-jquery-panel-slider-plugins
نویسنده: faramarz
۱۴:۳۴ ۱۳۹۳/۰۶/۰۷
واقعاً دستت درد نکنه
زدی به هدف همونی که دنبالش بودمه خیلی ممنون
نویسنده: پرنده غریب
۲۳:۰۴ ۱۳۹۳/۰۷/۲۵
سلام عزیز خسته نباشید ببخشید من زیاد با کدها اشنایی ندارم در اون حد شما
میخواستم ببینم میشه پاپ اپی با کلیک دوم ساخت و اگه میشه ممنون میشم یه پاپ اپ که با کلیک دوم کار کنه در اختیارم بزارید مرسی و خسته نباشید عزیز
اگه لطف کنید از طریق ایمیل خبرم کنید یدنیا ممنون میشم ازتون
پاسخ: 
سلام
چنین کاری با استفاده از کوکی شدنی است، منتها به دلیل کمبود فرصت متاسفانه امکان نوشتن کد وجود ندارد!
نویسنده: sara
۲۰:۴۶ ۱۳۹۳/۱۰/۱۲
سلام . من میخوام با زدن یک دکمه از نوع submit همزمان display یک div از حالت none به block تبدیل بشه و هم submit بتونه اطلاعت رو به جایی بفرسته و نتیجه رو توی همین div که فعالش کردیم نشون بده اگه امکانش هست راهنمایی کنید.
ممنون
پاسخ: 
سلام
برای مورد اول متد نمونه زیر قابل استفاده است:
document.getElementById('div-id').style.display = 'block';
برای حالت دوم باید از Ajax استفاده و در رویداد onsubmit تابع خود را فراخوانی کنید.
نویسنده: امیر
۱۱:۳۹ ۱۳۹۳/۱۰/۱۳
سلام، من هر کاری تونستم انجام دادم که موقع بسته شدن رویداد مرورگر یه پیغام صادر بشه یا بتونم دستوری رو اجرا کنم نه پیدا کردم و اگر هم پیدا کردم روی این مرورگرها به هیچ وجه جواب نمی دادن لطفا راهنمایی کنید.
پاسخ: 
سلام
متد متداول برای این کار در جاوا اسکریپت
window.onbeforeunload
است، البته این متد برای بستن پنجره مرورگر کاربرد دارد، نه خود مرورگر (برای بستن مروگر هیچ روشی برای اجرای دستور وجود ندارد!):
window.onbeforeunload = function(){
alert(1);
}
نویسنده: ali
۰۳:۴۶ ۱۳۹۴/۰۴/۱۶
سلام
خدا قوت
ممنون از سایت بسیار خوب شما
من قبلا مزاحمتون شده بودم و این بار سوال دیگه ای برام پیش اومد در مورد پنجره پاپ آپ با جی کوئری سوال داشتم در این سایت آموزش قرار دادن پاپ آپ با جی کوئری آموزش داده شده
http://iraniz.net/jquery-popup
بنده می خواستم که در این پنجره مطلب طولانی قرار
بدم . اما مشکل اینجاست که نوار اسکرول نداره
می خواستم از شما سوال کنم که کدوم کد رو تغییر بدم
تا نوار اسکرول بار فعال بشه
باز هم از شما ممنونم
یا علی مدد
پاسخ: 
سلام
می توانید در قسمت استایل CSS کد، کلاس popup را تغییر و به جای
overflow:hidden;
مقدار
overflow-y:scroll;
overflow-x:hidden;
را قرار دهید.
نویسنده: ali
۲۰:۲۷ ۱۳۹۴/۰۴/۱۷
سلام
خدا قوت
شما خیلی خوبی
ممنون
نویسنده: ali
۱۱:۴۶ ۱۳۹۴/۰۶/۰۶
سلام خسته نباشید. از جایی که پنجره های پاپ اپ به صورت خودکار توسط مرورگر بلاک میشن و باز نمیشن، میخواستم بپرسم چطور میتونیم یک پنجره مثلا خوش آمد گویی برای ابتدای باز شدن وبلاگ بذاریم که بازدید کننده برای بستن اون که اقدام کرد هم زمان با بستن اون یک پنجره پاپ اپ باز بشه؟ من این کدی که در زیر میذارم رو مد نظرم هست که به عنوان پنجره پاپ اپ باز بشه. ممنون.
<script type="text/javascript" src="http://feedgorji.zarshop.biz/Popup.aspx?so=1&s=61395&r=39934&u=grandmarket.eshopfa.biz&co=&WW=1024&WH=600&pc=19&rowcount=&colcount=&PopupTypeCode=2" language="javascript"></script>
پاسخ: 
سلام
باید کد مورد نظر را در یک فایل html قرار داده، سپس یک دکمه در وبلاگتان داشته باشید که با رویداد onclick متد window.open را فراخوانی و این متد نیز فایل html مورد نظر را نمایش دهد (آدرس فایل html به عنوان آدرس URL در متد window.open تنظیم می شود).
نکته: برای آشنایی بیشتر، در آموزش حاضر، بخش مروبط به متد window.open را مطالعه کنید.
نویسنده: محمد
۰۰:۵۹ ۱۳۹۴/۰۸/۱۸
سلام
خدا قوت
دو تا سوال دارم
اول اینکه چه جوری میشه برای عرض و ارتفاع به جای پیکسل، درصد (%) تعریف کنیم تا در همه مانیتور ها یه جور باز بشه
و دوم اینکه چه جوری میشه به جای دکمه (button) یک تصویر قرار داد تا زیباتر باشه
ممنون
پاسخ: 
سلام
پاسخ کوتاه به هر دو سوال شما این است که باید CSS بلد باشید!
در مورد استفاده از درصد، این یک شیوه متداول طراحی در وب است که در هنگام تعریف width و height یا همان عرض و ارتفاع عناصر، به جای درج مقدار ثابت پیکسلی، مقدار درصدی (به فرض %100) در نظر می گیرند، البته نمی توان جزئیات این تکنیک را در این قسمت خلاصه کرد، چون نیاز به درک مقدمات و تمرین کافی در CSS دارد!، به طور مثال:
.your-class{
height:100%;
width:100%;
}
در مورد بخش دوم سوال، می توانید به تگ input مربوط به دکمه یک کلاس اختصاص دهید و در استایل CSS برای آن کلاس با استفاده از خاصیت background تصویر در نظر بگیرید، مثال:
<style type="text/css">
.button{
background:url(/image/btn.png) no-repeat;
cursor:pointer;
border:none;
}
</style>
<input name="button" class="button" type="button" value="test">
نویسنده: محمد
۰۰:۰۷ ۱۳۹۴/۰۸/۱۹
سلام
خدا قوت
ممنون
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





2 × 5
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

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

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

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

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.