نحوه ساخت پنجره پاپ

پنجره های پاپ آپ امروزه به یکی از پرکاربردترین عناصر صفحات وب تبدیل شده اند. یکی از دلایل محبوبیت این پنجره های مودال، کاهش تعداد postback ها یا رفتن از صفحه ای به صفحه دیگر است. لزومی ندارد برای نمایش یک پیغام چند خطی و یا یک فرم کوچک مانند فرم لاگین که تنها چند فیلد دارد، کاربر را به صفحه دیگری هدایت کنیم. در این ارسال نحوه ساخت یک پنجره مودال پاپ آپ بسیار کم حجم را شرح خواهم داد. سادگی این پنجره پاپ آپ به شما امکان میدهد به راحتی آن را برای وبسایت خود سفارشی کنید.

چگونگی انجام کار و نحوه نمایش محتوا در پاپ آپ به شرح زیر است:

محتوایی که می خواهیم داخل پاپ آپ نمایش داده شود، داخل یک عنصر div که دارای یک خصیصه id است قرار میگیرند.
برای لینکی که می خواهیم با کلیک روی آن پاپ آپ نشان داده شود، خصیصه Name را برابر با modal قرار میدهیم. همچنین خصیصه href این لینک را برابر با id عنصر div که محتوا در آن قرار گرفته است، قرار می دهیم. کد جاوااسکریپت نوشته شده، در داخل صفحه به دنبال لینکی که دارای خصیصه name=”modal” است، جستجو میکند و سپس عنصری را که در خصیصه href به آن اشاره شده، به عنوان پاپ آپ نمایش می دهد.
یک عنصر div دیگر به عنوان ماسک دودی رنگ در زیر پاپ آپ کل صفحه را می پوشاند.

کدهای HTML