জাভাস্ক্রিপ্ট পপ আপ উইন্ডো টিউটোরিয়াল (Javascript Popup Window Tutorial in Bangla)



জাভাস্ক্রিপ্ট পপআপ এখন কম ব্যবহার হয়, আগে খুব প্রচলন ছিল। ইউজারকে অতিরিক্ত তথ্য আলাদা উইন্ডো খুলে দেখানো যায় পপআপ দিয়ে।
window.open() এই্ ফাংশন ব্যবহার করে মূলত পপআপ তৈরী করা হয়। open() এর ভিতর বেশ কিছু প্যারামিটার ব্যবহারের সুযোগ যেগুলি দিয়ে পপআপ উইন্ডোকে কাস্টমাইজ করা যায়।
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<script>
05.function pop() {
06.window.open( "http://www.google.com/" );
07.}
08.</script>
09.</head>
10.<body>
11. 
12.<form>
13.<input type="button" onClick="pop()" value="Old fashion pop">
14.</form>
15.<p onClick="pop()">Another pop</p>
16. 
17.</body>
18.</html>
প্রয়োগ দেখুন

** pop নামে একটা ফাংশন তৈরী করে সেখানে open() ফাংশনে একটা URL কে প্যারামিটার হিসেবে দিয়েছি। ফলে এইচটিএমএল এ তৈরী বাটন এবং টেক্সটে ক্লিক করলে নতুন ট্যাবে ঐ URL লোড হবে।
বর্তমান ব্রাউজারগুলিতে এই পপআপগুলি অন্য ট্যাবে খুলবে, আগের ব্রাউজারগুলিতে নতুন উইন্ডোতে খুলত।

এটা একটা সাধারন পপআপ, open() মেথডে নিচের প্যারামিটারগুলি ব্যবহার করা যায় এবং পপআপ কাস্টমাইজ করে নিজের মত বানানো যায়।
URL - পপআপে কোন লিংকটি খুলবে সেটার ঠিকানা
name - পপআপ উইন্ডোটির নাম।
height – নতুন উইন্ডোটির উচ্চতা,  pixels –এ ।
width - নতুন উইন্ডোটির width, pixels-এ ।
left - নতুন উইন্ডোটি বাম থেকে কত দুরে হবে সেটা pixel দিয়ে ঠিক করে দিতে পারেন।
top - নতুন উইন্ডোটি উপর থেকে কত দুরে হবে সেটা pixel দিয়ে ঠিক করে দিতে পারেন।
resizable (মান হতে পারে 0 বা 1) – ইউজার উইন্ডোটি resize করতে পারবে কিনা সেটা। যদি 0 দেন তাহলে রিসাইজ করতে পারবেনা আর 1 দিলে পারবে।
status (মান হতে পারে 0 বা 1) - status bar প্রদর্শন করবে কিনা।
menubar (মান হতে পারে 0 বা 1) - মেনু দেখাবে কিনা
toolbar (মান হতে পারে 0 বা 1) - নতুন উইন্ডোতে টুলবার দেখাবে কিনা
location (মান হতে পারে 0 বা 1) - এড্রেসবারে URL দেখাবে কিনা
scrollbars (মান হতে পারে 0 বা 1) - কনটেন্ট বেশি হলে স্ক্রলবার দেখাবে কিনা।
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<script>
05.function pop() {
06.window.open( 'http://www.google.com', 'testWindow', 'height=400, width=400, left=200, top=100, scrollbars=1' );
07.}
08.</script>
09.</head>
10.<body>
11. 
12.<form>
13.<input type="button" onClick="pop()" value="Customized pop">
14.</form>
15.<p onClick="pop()">Another pop</p>
16. 
17.</body>
18.</html>
প্রয়োগ দেখুন
open() এ মূলত ৩টি প্যারামিটার থাকে এজন্য উদাহরনে দেখুন শেষেরটির ভিতরে সবগুলি কমা দিয়ে দিয়ে height, width এসব দিয়েছি।
0, 1 এগুলি yes, no দিয়েও দেয়া যায়।

0 মন্তব্য(গুলি):