آموزش برنامه نویسی و مهارتهای وب
جمعه ۲۸ اردیبهشت ۱۴۰۳
Friday, May 17, 2024 GMT +3:30
Friday, May 17, 2024 GMT +3:30
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
همان طور که در آموزش های قبل دیدیم، جاوا اسکریپت یک زبان کد نویسی سمت کاربر یا 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><!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>دستور 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');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');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>دسته بندی: آموزش مقدماتی » JavaScript
برچسب ها: JavaScript
مطالب بیشتر:دستور switch و case در جاوا اسکریپت (JavaScript)
تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
توابع (Functions) در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
دیدگاه
۴۸ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.amirchermahini
۰۹:۴۶ ۱۳۹۱/۱۲/۲۶
با سلام وعرض ادب و احترام حضور برادر بزرگوارم
سوال
1- من در فایل html چطور و با چه دیوویژن این قسمت ها رو باز کنم که بتونم توی فایل استایل css انها رو فراخوانی کنم و در قسمتی از صفحه که میخوام ترازشون کنم ؟
اصلا ایا چنین امکانی وجود داره برای فایلهای جاوا و میشه در css اونها رو فراخوانی کرد یا نه ؟
و اگه میشه و امکانش هست و البته فرصت دارین لطفا راهنمایی کنین ؟
با تقدیر و تشکر از لطف شما بزرگوار
در ضمن چنانچه البته جسارت نباشه چون واقعا چنین اموزشهایی واقعا ارزش مادی نمیشه براشون گذاشت اما اگر برای جواب سوالات و راهنماییها هزینه ای هست با کمال میل پرداخت میکنم و فقط کافیه شماره کارت و هزینه رو اعلام کنین
باز هم تشکر و ارزوی توفیق
سوال
1- من در فایل html چطور و با چه دیوویژن این قسمت ها رو باز کنم که بتونم توی فایل استایل css انها رو فراخوانی کنم و در قسمتی از صفحه که میخوام ترازشون کنم ؟
اصلا ایا چنین امکانی وجود داره برای فایلهای جاوا و میشه در css اونها رو فراخوانی کرد یا نه ؟
و اگه میشه و امکانش هست و البته فرصت دارین لطفا راهنمایی کنین ؟
با تقدیر و تشکر از لطف شما بزرگوار
در ضمن چنانچه البته جسارت نباشه چون واقعا چنین اموزشهایی واقعا ارزش مادی نمیشه براشون گذاشت اما اگر برای جواب سوالات و راهنماییها هزینه ای هست با کمال میل پرداخت میکنم و فقط کافیه شماره کارت و هزینه رو اعلام کنین
باز هم تشکر و ارزوی توفیق
سلام
در مورد سوال، در صفحات وب استانداردهایی وجود دارد که باید از آنها پیروی کنیم، اگر با html و css آشنا باشید، می دانید که css صرفا نقش یک پوسته را برای تگ های html بازی می کند و در واقع به تگ های بی جان، شکل و زیبایی می دهد! درون استایل css هم تنها باید دستورات مربوط به آن را نوشت و از طریق کلاس یا آی دی به بلاک ها نسبت داد که در جای خود آموزش داده شده است.
لذا نمی توانید جاوا اسکریپت را داخل فایل css قرار دهید، جاوا اسکریپت باید یا به صورت فایل خارجی یا درون تگ های html باشد.
در مورد سوال دوم، سپاس از لطف شما، راهنمایی در حد معمول رایگان است اما اگر خودتان تمایل داشته باشید می توانید از بخش تماس با ما این مورد را عنوان کنید.
در مورد سوال، در صفحات وب استانداردهایی وجود دارد که باید از آنها پیروی کنیم، اگر با html و css آشنا باشید، می دانید که css صرفا نقش یک پوسته را برای تگ های html بازی می کند و در واقع به تگ های بی جان، شکل و زیبایی می دهد! درون استایل css هم تنها باید دستورات مربوط به آن را نوشت و از طریق کلاس یا آی دی به بلاک ها نسبت داد که در جای خود آموزش داده شده است.
لذا نمی توانید جاوا اسکریپت را داخل فایل css قرار دهید، جاوا اسکریپت باید یا به صورت فایل خارجی یا درون تگ های html باشد.
در مورد سوال دوم، سپاس از لطف شما، راهنمایی در حد معمول رایگان است اما اگر خودتان تمایل داشته باشید می توانید از بخش تماس با ما این مورد را عنوان کنید.
amirchermahini
۱۴:۳۴ ۱۳۹۱/۱۲/۲۶
بازهم سلام و عرض ادب و تشکر
منظور من هم همین بود که مثلا به همین مثالی که از جاوا در مورد پنجره های pop up در این صفحه اورده شده اگه من بخوام درون css بهش شکل و زیبایی بدم و بجای اینکه در بالای صفحه و سمت راست باز بشه مثلا ببرم وسط صفحه قرارش بدم در css باید با چه تگی فراخوانی کنم و تغییرات را روی ان انجام بدهم
بازهم تقدیر و تشکر و منظور از قسمت تماس با ما همان منوی بالای صفحه بود و از انجا باید برای کار های دیگه مزاحم بشم
منظور من هم همین بود که مثلا به همین مثالی که از جاوا در مورد پنجره های pop up در این صفحه اورده شده اگه من بخوام درون css بهش شکل و زیبایی بدم و بجای اینکه در بالای صفحه و سمت راست باز بشه مثلا ببرم وسط صفحه قرارش بدم در css باید با چه تگی فراخوانی کنم و تغییرات را روی ان انجام بدهم
بازهم تقدیر و تشکر و منظور از قسمت تماس با ما همان منوی بالای صفحه بود و از انجا باید برای کار های دیگه مزاحم بشم
سلام
برای تنظیم پنجره pop up در قسمت window.open از پارامترهایی که در آموزش عنوان شده باید استفاده کنید، به طور مثال فاصله از کناره ها:
برای تنظیم پنجره pop up در قسمت window.open از پارامترهایی که در آموزش عنوان شده باید استفاده کنید، به طور مثال فاصله از کناره ها:
left=0, top=0ehsan
۱۲:۱۹ ۱۳۹۱/۱۲/۲۸
سلام
من یک صفحع popup دارم که با jquery & css نوشته شده و داخلش یک فرم برای اپلود فایل قرار دادم حالا وقتی روی submit کلیک میکنم اطلاعات فرم ارسال نمیشه و فقط popup بسته میشه. چکار باید بکنم؟
من یک صفحع popup دارم که با jquery & css نوشته شده و داخلش یک فرم برای اپلود فایل قرار دادم حالا وقتی روی submit کلیک میکنم اطلاعات فرم ارسال نمیشه و فقط popup بسته میشه. چکار باید بکنم؟
سلام
بدون دیدن سورس کدها نمی توان پاسخ دقیق داد، اما در کل باید ببینید در هنگامی که روی دکمه ارسال کلیک می کنید، چه توابعی فراخوانی می شوند.
بدون دیدن سورس کدها نمی توان پاسخ دقیق داد، اما در کل باید ببینید در هنگامی که روی دکمه ارسال کلیک می کنید، چه توابعی فراخوانی می شوند.
e-k
۱۵:۱۷ ۱۳۹۲/۰۴/۱۸
با سلام و خسته نباشید کد طراحی انواع مختلف popup با html و javascript چگونه است؟
منظورم این است که یک پنجره popup داشته باشیم که وقتی مثلا روی دکمه ی خطا کلیک می کنیم پنجره popup از نوع پنجره error باشد
و وقتی مثلا روی دکمه ی پیغام کلیک می کنیم پنجره popup از نوع پنجره پیغام باشد
و وقتی مثلا روی دکمه ی سوال کلیک می کنیم پنجره popup از نوع پنجره سوالی باشد یعنی اگر بله را انتخاب کنیم function خاصی انجام شود و این function ها متغیر باشد
منظورم این است که یک پنجره popup داشته باشیم که وقتی مثلا روی دکمه ی خطا کلیک می کنیم پنجره popup از نوع پنجره error باشد
و وقتی مثلا روی دکمه ی پیغام کلیک می کنیم پنجره popup از نوع پنجره پیغام باشد
و وقتی مثلا روی دکمه ی سوال کلیک می کنیم پنجره popup از نوع پنجره سوالی باشد یعنی اگر بله را انتخاب کنیم function خاصی انجام شود و این function ها متغیر باشد
سلام
امکان popup قابلیت سفارشی سازی در حد مد نظرتان را ندارد، برای حالت های گرافیکی باید بر کدنویسی جاوا اسکریپت و CSS یا فریم ورک هایی مانند جی کئوری مسلط باشید تا بتوانید اینگونه جلوه های گرافیکی را خلق کنید.
امکان popup قابلیت سفارشی سازی در حد مد نظرتان را ندارد، برای حالت های گرافیکی باید بر کدنویسی جاوا اسکریپت و CSS یا فریم ورک هایی مانند جی کئوری مسلط باشید تا بتوانید اینگونه جلوه های گرافیکی را خلق کنید.
یحیی
۲۰:۳۱ ۱۳۹۲/۰۶/۰۶
با سلام
چطور میشه اگه کاربر خواست صفحه رو رفرش کنه (با f5 یا دکمه رفرش یا هر روش دیگه ) یه پیغام پاپ آپ نشون بده که اگه تایید کنه رفرش نشه ؟
چطور میشه اگه کاربر خواست صفحه رو رفرش کنه (با f5 یا دکمه رفرش یا هر روش دیگه ) یه پیغام پاپ آپ نشون بده که اگه تایید کنه رفرش نشه ؟
سلام
می توانید از نمونه کد زیر استفاده کنید.
می توانید از نمونه کد زیر استفاده کنید.
<script type="text/javascript">
window.onbeforeunload = function (e){
e = e || window.event;
//IE, Firefox
if(e){
e.returnValue = 'آیا مطمئن هستید؟';
}
//Safari
return 'آیا مطمئن هستید؟';
};
</script>مصطفی
۱۴:۲۷ ۱۳۹۲/۰۷/۲۱
سلام
می خواستم بدونم چطور میشه یه پنجره ی تمام گرافیکی طراحی کرد مثلا بجای پنجره alert پنجره ی باشه که خودم کامل طراحیش کرده باشم و بجای alert باز بشه
می خواستم بدونم چطور میشه یه پنجره ی تمام گرافیکی طراحی کرد مثلا بجای پنجره alert پنجره ی باشه که خودم کامل طراحیش کرده باشم و بجای alert باز بشه
سلام
طراحی پنجره ای شبیه و جایگزین alert، به آشنایی در حد نسبتا حرفه ای با CSS و JavaScript نیاز دارد، به طور مثال باید بتوانید یک پنجره کوچک را در وسط صفحه (با CSS) تنظیم کنید و (با JavaScript) برای آن رفتار تعاملی (به فرض دکمه بستن پنجره) طراحی کنید، هنگام کلیک کاربر بر روی یک گزینه، به جای فراخوانی alert، یک تابع را فراخوانی کنید که تابع بلاک سفارشی شده را از حالت display none به block تبدیل کند (پنجره را نمایش دهد) و با کلیک بر روی دکمه بستن، تابع حالت display را با مقادیر none تنظیم کند (پنجره مجددا مخفی شود).
نمونه کد:
طراحی پنجره ای شبیه و جایگزین alert، به آشنایی در حد نسبتا حرفه ای با CSS و JavaScript نیاز دارد، به طور مثال باید بتوانید یک پنجره کوچک را در وسط صفحه (با CSS) تنظیم کنید و (با JavaScript) برای آن رفتار تعاملی (به فرض دکمه بستن پنجره) طراحی کنید، هنگام کلیک کاربر بر روی یک گزینه، به جای فراخوانی alert، یک تابع را فراخوانی کنید که تابع بلاک سفارشی شده را از حالت display none به block تبدیل کند (پنجره را نمایش دهد) و با کلیک بر روی دکمه بستن، تابع حالت display را با مقادیر none تنظیم کند (پنجره مجددا مخفی شود).
نمونه کد:
<script type="text/javascript">
//show div
function ShowError(){
document.getElementById('wrapper').style.display = 'block';
document.getElementById('window').style.display = 'block';
}
//close div
function CloseError(){
document.getElementById('wrapper').style.display = 'none';
document.getElementById('window').style.display = 'none';
}
</script>
<style type="text/css">
.wrapper{
display:none;
width:100%;
height:100%;
top:0%;
left:0%;
position:fixed;
background:#666;
-khtml-opacity:0.5;
opacity:0.5;
}
.window{
display:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
width:260px;
height:75px;
position:fixed;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-130px;
background:#EAEAEA;
text-align:center;
padding-top:25px;
direction:rtl;
border:2px #0099CC solid;
}
</style>
<div id="wrapper" class="wrapper"></div>
<div id="window" class="window">
خطایی رخ داده است!
<br><br>
<input type="button" value="بستن" onclick="CloseError();">
</div>
<input type="button" value="کلیک" onclick="ShowError();">هدایت
۱۱:۵۳ ۱۳۹۲/۱۰/۱۱
سلام
در مورد این سوال اخری ایا میشه درون css این پنجره رو به حالت گوشه گرد کرد منظورم نمایش پیغام طراحی پنجره ای شبیه و جایگزین alert (سوال از مصطفی )
در مورد این سوال اخری ایا میشه درون css این پنجره رو به حالت گوشه گرد کرد منظورم نمایش پیغام طراحی پنجره ای شبیه و جایگزین alert (سوال از مصطفی )
سلام
بله، اگر دقت کنید بلاک دارای کلاس CSS با نام window است، پس هر قابلیتی که بتوان روی div اعمال کرد، در اینجا نیز قابل استفاده است.
بله، اگر دقت کنید بلاک دارای کلاس CSS با نام window است، پس هر قابلیتی که بتوان روی div اعمال کرد، در اینجا نیز قابل استفاده است.
morteza
۱۷:۳۹ ۱۳۹۲/۱۰/۳۰
سلام بزرگوار
شما با قرار دادن
لطفاً روش اجرای
با تشکر فراوان
شما با قرار دادن
onclick="WinOpen()"window.open()لطفاً روش اجرای
window.open()با تشکر فراوان
سلام
برای این کار کافی است از نمونه کد زیر استفاده کنید:
برای این کار کافی است از نمونه کد زیر استفاده کنید:
<script type="text/javascript">
window.onclick = function(){
yourFunction();
}
</script>۱۹:۳۲ ۱۳۹۲/۱۱/۰۵
دوست عزیز و پرتلاش
خسته نباشید می خواستم بدونم تو کد زیر اگه بخوام پنجره پاپ تو پشت صفحات باز بشه باید چیکار کنم
ممنونم ببخشید کد کمی طولانیه
خسته نباشید می خواستم بدونم تو کد زیر اگه بخوام پنجره پاپ تو پشت صفحات باز بشه باید چیکار کنم
ممنونم ببخشید کد کمی طولانیه
حذف شدکنترل رفتار پنجره pop up در مرورگرهای مختلف را (به جزء پارامترهای استاندارد گفته شده) نمی توان با کدهای جاوا اسکریپتی تغییر داد!
۰۰:۳۱ ۱۳۹۲/۱۱/۰۶
ممنون از پاسخ گویی و مطالب ارزنده تون
موفق باشید
موفق باشید
۱۶:۴۵ ۱۳۹۲/۱۱/۲۵
با سلام
من یه اسکریپت پاپ آپ دارم که میخوام زیر پنجره اصلی باز بشه میشه راهنمایی کنید؟ با تشکر
اینم اسکریپته
من یه اسکریپت پاپ آپ دارم که میخوام زیر پنجره اصلی باز بشه میشه راهنمایی کنید؟ با تشکر
اینم اسکریپته
حذف شدسلام
کنترل پنجره پاپ آپ را (به جزء در مواردی مشخص) نمی توان با کد تغییر داد چون به رفتار مرورگر و امنیت کاربران ارتباط دارد (تغییر نمایش در زیر پنجره های دیگر با کد امکانپذیر نیست).
کنترل پنجره پاپ آپ را (به جزء در مواردی مشخص) نمی توان با کد تغییر داد چون به رفتار مرورگر و امنیت کاربران ارتباط دارد (تغییر نمایش در زیر پنجره های دیگر با کد امکانپذیر نیست).
۱۵:۴۲ ۱۳۹۲/۱۱/۲۶
ممنون که وقت گذاشتید
۱۶:۴۲ ۱۳۹۳/۰۲/۱۴
آقا میشه کمکم کنی
میخوام کد اهنگ رو توی کادر بذارم تو وبلاگم
برای استفاده بقیه
ولی نمیتونم بلد نیستم
اگه میشه بهم بگین ممنون میشم
بدرود
میخوام کد اهنگ رو توی کادر بذارم تو وبلاگم
برای استفاده بقیه
ولی نمیتونم بلد نیستم
اگه میشه بهم بگین ممنون میشم
بدرود
لطفا عبارت "لوگوی حمایتی" را در قسمت جستجوی سایت وارد کنید، در بخشی از آموزش "چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟"، در خصوص نحوه درج کدها به صورت قابل کپی شدن صحبت شده.
امیرعباس
۲۲:۰۳ ۱۳۹۳/۰۳/۱۱
سلام
جاوا اسکریپت رو وقتی روی کدهای asp اعمال میکنم اصلا نمیتونم نتیجه بگیرم ولی همون کد با html خروجی میده. ممنون میشم دلیلش رو بگید و راهنمایی کنم
جاوا اسکریپت رو وقتی روی کدهای asp اعمال میکنم اصلا نمیتونم نتیجه بگیرم ولی همون کد با html خروجی میده. ممنون میشم دلیلش رو بگید و راهنمایی کنم
سلام
لطفا در این رابطه به سایت های مرتبط با ASP.NET مراجعه کنید.
لطفا در این رابطه به سایت های مرتبط با ASP.NET مراجعه کنید.
۲۲:۰۹ ۱۳۹۳/۰۳/۱۳
سلام خسته نباشید عزیز
میخواستم ببینم چطور میشه یک پاپ آپ رو جوری تنظیم کرد که روی دومین کلیک باز بشه نه اولی مرسی و خسته نباشید
اگر جواب دادید لطف کنید از طریق ایمیل بهم خبر بدید ممنون میشم و سپاس از زحماتتون
میخواستم ببینم چطور میشه یک پاپ آپ رو جوری تنظیم کرد که روی دومین کلیک باز بشه نه اولی مرسی و خسته نباشید
اگر جواب دادید لطف کنید از طریق ایمیل بهم خبر بدید ممنون میشم و سپاس از زحماتتون
سلام
راه حل ساده ای وجود ندارد، باید کمی با جاوا اسکریپت آشنا باشید، در این صورت تابع موجود در لینک زیر دقیقا این کار را انجام می دهد:
راه حل ساده ای وجود ندارد، باید کمی با جاوا اسکریپت آشنا باشید، در این صورت تابع موجود در لینک زیر دقیقا این کار را انجام می دهد:
http://jsbin.com/uzivuj/13
صفحه 1 از 4آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...۱۴۰۳/۰۲/۲۲
سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده ۱۴۰۳/۰۲/۲۱
سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون۱۴۰۳/۰۲/۱۹
سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...۱۴۰۳/۰۲/۱۹
پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...۱۴۰۳/۰۲/۱۸
پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...۱۴۰۳/۰۲/۱۶
vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...۱۴۰۳/۰۲/۰۵
vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...۱۴۰۳/۰۲/۰۴
پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...۱۴۰۳/۰۲/۰۲
هادی عبداله زاده
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟ ۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...۱۴۰۳/۰۱/۲۰
پـــرتو
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...۱۴۰۳/۰۱/۱۹
حسین بلاگ
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...۱۴۰۳/۰۱/۱۹
شریفی
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...۱۴۰۳/۰۱/۱۵
فرهادی
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...۱۴۰۳/۰۱/۱۰
فرهادی
با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...۱۴۰۳/۰۱/۰۹
سید صالح
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...۱۴۰۳/۰۱/۰۷
فرهادی
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...۱۴۰۳/۰۱/۰۶
فرهادی
با سلام و درود سال نو رو بهتون تبریک میگم یه سوال من میخوام لینکهای داخل صفحه sitemap.xml سایتها رو دربیارم کدش رو هم...۱۴۰۳/۰۱/۰۲
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.