पॉप-अप विंडो कशी बनवायची? पॉपअप - पॉप-अप विंडो. पॉप-अप तयार करणे आणि वापरणे

पॉप-अप विंडो कशी बनवायची हा प्रश्न कोणत्याही तरुण नवशिक्या प्रोग्रामरच्या मनात सतावतो. आणि आज आपण ही पॉप-अप विंडो कशी बनवायची ते पाहू. मी स्वतःहून थोडे पुढे जाईन, कारण आपण जे करू ते खरोखर खूप, अतिशय मनोरंजक आणि कार्यक्षम असेल.

म्हणून, आम्ही माझ्या ग्राहकांपैकी एकाच्या वेबसाइटवर लागू केलेली तत्सम विंडो तयार करू. तुम्ही एक नजर टाकू शकता. अशी विंडो तयार करण्याच्या या पद्धतीचा मोठा फायदा असा आहे की आम्ही JavaScript वापरणार नाही, परंतु केवळ माझ्या आवडत्या CSS3 आणि HTML5 पर्यंतच मर्यादित राहू. अशा प्रकारे आपण एका दगडात अनेक पक्षी मारू. प्रथम, आम्ही आमची साइट लोड करणे सोपे करू आणि दुसरे म्हणजे, आम्ही कोडच्या कमीत कमी वापरासह सर्वकाही सोयीस्कर आणि सोप्या स्वरूपात लागू करू, जे तुम्हाला स्वतंत्रपणे तुमच्या पॉप-अप विंडोला कोणताही आकार, रंग, आकार देण्यास अनुमती देईल. मला वाटते की ते खूप छान आहे. चला तर मग सुरुवात करूया.

कल्पना करा की तुमच्याकडे आधीच वेबसाइट आहे आणि तुम्हाला कुठेतरी एक बटण लागू करायचे आहे, उदाहरणार्थ, “नोंदणी” किंवा “ऑनलाइन अर्ज”. आणि तुमची इच्छा आहे की वापरकर्त्याने एक लहान विंडो पाहण्यासाठी या बटणावर क्लिक करावे जे त्याला त्यात काही डेटा प्रविष्ट करण्यास अनुमती देते आणि नंतर साइट प्रशासकाकडे पाठवू देते. ही विंडो आम्ही आता बनवणार आहोत.

सुरुवातीला, आम्ही हे बटण तयार करू, मला वाटते की तुम्ही ते जास्त अडचणीशिवाय करू शकता. पण टॅगमध्ये तुम्ही खालील #openModal प्रविष्ट करणे आवश्यक आहे . तुमच्यासाठी हे असेच दिसले पाहिजे. पुढे, क्लोजिंग टॅगच्या आधी खाली कोड लिहा. कृपया लक्षात घ्या की आम्ही सजावटीसाठी वर्ग आणि विंडो कॉल करण्यासाठी आयडी वापरू. या नियमाचे पालन करून, आम्ही असंख्य वेगवेगळ्या पॉप-अप विंडो तयार करू शकतो.

एक्स पॉप-अप विंडो

ही विंडो सर्वात सोप्या पद्धतीने तयार केली आहे. वैयक्तिक काहीही नाही, सर्वकाही सोपे आहे :)

आता आपल्याला प्रत्येक गोष्ट सुंदर रीतीने डिझाइन करण्याची आणि सर्वकाही जसे पाहिजे तसे कार्य करते याची खात्री करणे आवश्यक आहे. चला सजावट सुरू करूया.

सजावट

मोडलडायलॉग ( स्थिती: निश्चित; फॉन्ट-फॅमिली: एरियल, हेल्वेटिका, सॅन्स-सेरिफ; शीर्ष: 0; उजवीकडे: 0; तळ: 0; डावीकडे: 0; पार्श्वभूमी: rgba(0,0,0,0.8); z-इंडेक्स : 99999; -वेबकिट-ट्रान्झिशन: अपारदर्शकता 400ms ease-in;

मोडलसंवाद( स्थिती: निश्चित; फॉन्ट-फॅमिली: एरियल, हेल्वेटिका, सॅन्स-सेरिफ; शीर्ष: 0; उजवीकडे : 0 ; तळ: 0; डावीकडे: 0; पार्श्वभूमी: rgba(0, 0, 0, 0.8); z-इंडेक्स: 99999; वेबकिट - संक्रमण : अपारदर्शकता 400ms सहज - इन ; Moz - संक्रमण : अपारदर्शकता 400ms सहज - इन ; संक्रमण: अपारदर्शकता 400ms सहज - मध्ये; प्रदर्शन: काहीही नाही; सूचक - घटना : काहीही नाही ;

वरील कोड नरक म्हणून सोपे आहे. पण जर मला माहित आहे की माझा ब्लॉग बऱ्याच नवोदितांनी वाचला आहे, मी संभाव्य अडचणींचे विश्लेषण करेन. जेणेकरून खिडकी नेहमी एकाच ठिकाणी असेल, मी तिला एक निश्चित स्थान दिले. तसेच, विंडो संपूर्ण स्क्रीनवर पसरवण्यासाठी, मी कोपऱ्यांचे निर्देशांक पॉइंट 0 वर सेट केले. पार्श्वभूमीचा रंग काळा वर सेट केला गेला आणि पारदर्शकता जोडली गेली, अशा प्रकारे मॉडेल विंडोच्या सभोवतालचा अंधार साध्य झाला. विंडो उर्वरित पृष्ठ घटकांच्या शीर्षस्थानी असल्याची खात्री करण्यासाठी, त्यास मोठ्या वर सेट करा z-इंडेक्स. आमच्या आवडत्या मॉडेल विंडोच्या गुळगुळीत दिसण्यासाठी आणि गायब होण्यासाठी, आणि ते असे होईल, माझ्यावर विश्वास ठेवा, संक्रमण. विंडो लपविण्यासाठी आपल्याला सेट करणे आवश्यक आहे प्रदर्शनव्ही काहीही नाही. मालमत्ता पॉइंटर-इव्हेंटतुम्हाला घटकांची परस्पर क्रिया (क्लिक करण्यायोग्यता) नियंत्रित करण्यास अनुमती देते.

एक पॉप-अप विंडो उघडत आहे

आम्ही आमची खिडकी सजवली. परंतु! ते, तुम्ही मला सांगा, कार्य करत नाही. होय, मी उत्तर देतो, तसे आहे. कारण आता मनोरंजक भाग येतो. CSS3 ने स्यूडो-क्लास सादर केला लक्ष्य,खरोखर उपयुक्त गोष्ट, तुम्ही काहीही म्हणा. आणि आमच्या मॉडेल पॉप-अप विंडोमध्ये त्याशिवाय कोणताही मार्ग नाही. ते काय करते? हा स्यूडो-क्लास, ॲड्रेस बारमध्ये आयडी म्हणून परिभाषित केलेल्या काही घटकांसह निर्दिष्ट केल्यास, आमच्या बाबतीत ते आहे #openModal.मग, या छद्म-वर्गाचे गुणधर्म लक्ष्य घटकापेक्षा अधिक महत्त्वाचे होतील. मला वाटते की मला काय करायचे आहे ते तुम्हाला आधीच समजले आहे.

ModalDialog:लक्ष्य (डिस्प्ले: ब्लॉक; पॉइंटर-इव्हेंट्स: ऑटो; ) .modalDialog > div (रुंदी: 400px; स्थान: सापेक्ष; समास: 10% ऑटो; पॅडिंग: 5px 20px 13px 20px; सीमा-त्रिज्या: 10px; पार्श्वभूमी: # fff; पार्श्वभूमी: -moz-linear-gradient(#fff, #999); )

मोडल डायलॉग: लक्ष्य( प्रदर्शन: ब्लॉक; पॉइंटर-इव्हेंट्स: ऑटो; मोडल डायलॉग > div ( रुंदी: 400px; स्थिती: नातेवाईक; मार्जिन: 10% ऑटो; पॅडिंग: 5px 20px 13px 20px; सीमा - त्रिज्या : 10px ; पार्श्वभूमी: #fff; पार्श्वभूमी : - moz - रेखीय - ग्रेडियंट (#fff, #999); पार्श्वभूमी : - वेबकिट - रेखीय - ग्रेडियंट (#fff, #999); पार्श्वभूमी : - o - रेखीय - ग्रेडियंट (#fff, #999);

छद्म वर्ग लक्ष्य DISPLAY ला ब्लॉक करण्यासाठी सेट करते आणि अशा प्रकारे विंडो पॉप अप होते. POINTER-EVENTS गुणधर्म लिंकची क्रिया नियंत्रित करते.
DIV गुणधर्म विंडोची रुंदी, स्क्रीनवरील तिची स्थिती आणि विंडो पृष्ठाच्या मध्यभागी ठेवण्यासाठी पॅडिंग सेट करते. उर्वरित गुणधर्म पांढऱ्या ते गडद राखाडी ग्रेडियंटसह पृष्ठाच्या आतील मार्जिन, कोपऱ्यांचे गोलाकार आणि विंडोची पार्श्वभूमी सेट करतात.

मॉडेल विंडो बंद करत आहे

जेव्हा विंडो डिझाइन सेट केले जाते आणि ते उघडते, तेव्हा तुम्हाला विंडो बंद करण्यासाठी एक बटण बनवावे लागेल - ते डिझाइन करा आणि कार्यक्षमता लागू करा. CSS3 आणि HTML5 वापरल्याने तुम्हाला प्रतिमा न वापरता स्टायलिश सानुकूल बटणे तयार करण्याची परवानगी मिळते:

बंद करा (पार्श्वभूमी: #606061; रंग: #FFFFFF; ओळ-उंची: 25px; स्थिती: परिपूर्ण; उजवीकडे: -12px; मजकूर-संरेखित: केंद्र; शीर्ष: -10px; रुंदी: 24px; मजकूर-सजावट: काहीही; फॉन्ट- वजन: -वेबकिट-बॉर्डर-त्रिज्या: 12px; :होवर (पार्श्वभूमी: #00d9ff; )

बंद( पार्श्वभूमी: #606061;

3. लिंकवरून कॉल केलेल्या jQuery मॉडेल विंडोचे उदाहरण (डेमोवरून)

बहुधा, तुम्ही इंटरनेटवर एकापेक्षा जास्त वेळा पॉप-अप मॉडेल विंडो पाहिली असेल - नोंदणी पुष्टीकरण, चेतावणी, संदर्भ माहिती, फाइल डाउनलोड आणि बरेच काही. या ट्युटोरियलमध्ये मी सर्वात सोप्या मॉडेल विंडो कशा तयार करायच्या याची अनेक उदाहरणे देईन.

एक साधी पॉप-अप मॉडेल विंडो तयार करणे आता लगेच दिसणाऱ्या साध्या मॉडेल विंडोसाठी कोड पाहणे सुरू करूया.
jQuery कोड

$(दस्तऐवज).तयार(कार्य()
{
सूचना ("पॉप-अप विंडोमधील मजकूर");
});

कोड तुमच्या पृष्ठाच्या मुख्य भागामध्ये कुठेही पेस्ट करा. पृष्ठ लोड झाल्यानंतर लगेच, कोणत्याही आदेशाशिवाय, तुम्हाला अशी दिसणारी विंडो दिसेल:

परंतु संपूर्ण पृष्ठ ब्राउझरमध्ये लोड केल्यानंतर खालील कोड कार्यान्वित केला जाईल. आमच्या उदाहरणात, प्रतिमांसह पृष्ठ लोड केल्यानंतर, एक साधी पॉप-अप विंडो पॉप अप होईल:

$(विंडो).लोड(फंक्शन()
{
इशारा("पृष्ठ लोडिंग पूर्ण झाले आहे!)");
});

CSS सह लिंकवरून jQuery मॉडेल विंडो कॉल करणे पुढील पायरी म्हणजे लिंकवर क्लिक केल्यावर मॉडेल विंडो तयार करणे. पार्श्वभूमी हळूहळू गडद होईल.

लॉगिन आणि नोंदणी फॉर्म अशा विंडोमध्ये स्थित असल्याचे तुम्ही अनेकदा पाहू शकता. चला व्यवसायात उतरूया

प्रथम, html भाग लिहू. आम्ही हा कोड तुमच्या दस्तऐवजाच्या मुख्य भागामध्ये ठेवतो.

मोडल विंडो कॉल करत आहे

मॉडेल विंडो मजकूर
बंद
मॉडेल विंडोमध्ये मजकूर.

CSS कोड. एकतर वेगळ्या css फाईलमध्ये किंवा डोक्यात.

शरीर (
font-family:verdana;
फॉन्ट-आकार:15px;
}
.लिंक (रंग:#fff; मजकूर-सजावट:काहीही नाही)
.लिंक:होव्हर (रंग:#ffff; मजकूर-सजावट:अधोरेखित)
#मुखवटा (
स्थिती: निरपेक्ष;
डावीकडे:0;
शीर्ष:0;
z-इंडेक्स:9000;
पार्श्वभूमी-रंग:#000;
प्रदर्शन: काहीही नाही;
}
#boxes.window (
स्थिती: निरपेक्ष;
डावीकडे:0;
top:0px;
-टॉप: 40px;
रुंदी:440px;
उंची: 200px;
प्रदर्शन: काहीही नाही;
z-इंडेक्स:9999;
पॅडिंग: 20px;
ओव्हरफ्लो: लपलेले;
}
#बॉक्स #संवाद (
रुंदी:375px;
उंची: 203px;
पॅडिंग: 10px;
पार्श्वभूमी-रंग:#ffffff;
}
.top(
स्थिती: निरपेक्ष;
डावीकडे:0;
शीर्ष:0;
रुंदी:370px;
उंची: 30px;
पार्श्वभूमी: #0085cc;
पॅडिंग: 8px 20px 6px 10px;
}
.बंद(
फ्लोट:उजवीकडे;
}
.सामग्री(
पॅडिंग-टॉप: 35px;
}

jQuery कोडमध्ये, आम्ही मॉडेल विंडोच्या स्थितीवर आणि मुखवटावर लक्ष केंद्रित करू, आमच्या बाबतीत, पार्श्वभूमी हळूहळू गडद होणे.

लक्ष द्या! दस्तऐवजाच्या शीर्षस्थानी लायब्ररी समाविष्ट करण्यास विसरू नका!

Google वेबसाइटवरून लायब्ररी कनेक्ट करत आहे. बरं, jQuery कोड स्वतःच.

jQuery कोड

$(दस्तऐवज).तयार(फंक्शन() (
$("a").क्लिक(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(दस्तऐवज).उंची();
var maskWidth = $(window).width();
$("#mask").css(("रुंदी":maskWidth,"height":maskHeight));
$("#मास्क").फेडइन(1000);
$("#mask").fadeTo("स्लो",0.8);
var winH = $(विंडो).उंची();
var winW = $(विंडो).रुंदी();
$(id).css("टॉप", winH/2-$(id).height()/2);
$(id).css("डावीकडे", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".विंडो .क्लोज").क्लिक(फंक्शन (ई) (
e.preventDefault();
$("#मास्क, .विंडो").लपवा();
});
$("#mask").क्लिक(function() (
$(हे).लपवा();
$(".विंडो").लपवा();
});
});

आज आम्ही तुमच्या वेबसाइटसाठी तुमची स्वतःची पॉपअप विंडो कशी तयार करावी याबद्दल बोलू. आता ही पद्धत खूप लोकप्रिय आहे, परंतु त्याच्या अंमलबजावणीसाठी बहुतेक उपाय दिले जातात. पोस्टच्या आत फार सुंदर नसलेल्या विंडोचे उदाहरण (परंतु हे फक्त एक उदाहरण आहे)...

या पोस्टमध्ये आपण अशी पॉपअप विंडो कशी बनवायची ते शिकू. साधे, जलद, प्रभावी आणि सर्वात महत्त्वाचे म्हणजे विनामूल्य!

कोणत्याही पॉपअप विंडोमध्ये मूलत: दोन भाग असतात. प्रथम सामान्य पार्श्वभूमी गडद करणे आहे. दुसरी विंडो स्वतः आहे. विंडो, यामधून, सहसा शीर्षक, मजकूर आणि सदस्यता फॉर्ममध्ये विभागली जाते. निर्दिष्ट रचना लक्षात घेऊन आमच्या विंडोसाठी बेस तयार करूया.

आमच्याकडे आहे:
fs_popup_bg — साइट अंधुक करणे;
fs_popup — विंडो स्वतः;
fs_popup_head — विंडो शीर्षक;
fs_content — विंडोची सामग्री, दोन भागांमध्ये विभागलेली;

आता आवश्यक शैली लिहूया...

#fs_popup_bg ( z-index:9999; left:0; top:0; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); ) #fs_popup ( समास: 10% 20%; बॉर्डर: 5px सॉलिड #FF0000; 1px 10px fs_content_left, .fs_content_right (float: left; padding: 5px: font-size: 0000;)

चला आमच्या पॉपअप विंडोच्या शैलींवर एक द्रुत नजर टाकूया.
#fs_popup_bg- सूचित करते की आमची पार्श्वभूमी काळी आणि जवळजवळ अपारदर्शक असेल (0.9), वरच्या डाव्या कोपर्यात स्थित असेल आणि स्क्रीनचे संपूर्ण क्षेत्र व्यापेल. या प्रकरणात, घटकाची खोली किंवा त्याऐवजी त्याची उंची इतर घटकांपेक्षा खूप मोठी असेल (इतरांपेक्षा निश्चितपणे जास्त).
#fs_popup- सूचित करते की विंडो पार्श्वभूमीच्या वर एक पातळी असेल (अन्यथा आम्ही ती पाहणार नाही). त्याची परिमाणे गोलाकार कोपरे आणि लाल बॉर्डरसह 600px बाय 300px असेल.
.fs_content_left, .fs_content_right- आम्हाला सांगते की ब्लॉक्स डावीकडे दाबले जातात (त्याच स्तरावर त्यांच्या स्थानासाठी आवश्यक), त्यांना इंडेंट आणि एरियल फॉन्ट आहेत.

चला आमची विंडो सामग्रीसह भरा:

बंदया पोस्टमध्ये आपण अशी पॉपअप विंडो कशी बनवायची ते शिकू. साधे, जलद, प्रभावी आणि सर्वात महत्त्वाचे म्हणजे विनामूल्य! त्वरा करा आणि तुमचा ई-मेल प्रविष्ट करा आणि भरपूर उपयुक्त माहिती मिळवा!*

आपला ई - मेल:
* - हे फील्ड सक्रिय नाही. "सदस्यता घ्या" बटणावर क्लिक करून तुम्ही जाहिरात सामग्रीच्या मोठ्या प्रमाणावर मेलिंगच्या उद्देशाने तुमचा पत्ता वापरण्यास सहमती देता. तुम्ही तुमची कार, अपार्टमेंट आणि तुमच्या उत्पन्नाच्या 10% साइटच्या लेखकाला देखील द्या.

आणि अधिक सुंदर प्रदर्शनासाठी आमच्या शैली जोडूया:

#fs_popup_bg ( z-index:999999999998; left:0; top:0; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); ) #fs_popup ( समास: 10% 20%; z-index:999999999; रुंदी: 5px ठोस #FF0000; 1px 10px fs_popup_head ( text-align: right; ) .fs a color:Fs; ; मजकूर-सजावट: अधोरेखित करा; ); फॉन्ट-आकार: 7px; रेखा-उंची: 7px; ) .fs_content_right इनपुट ( समास: 5px; रुंदी: 190px; रंग: #000; ) .fs_ok ( सीमा: 1px घन #FF0000; सीमा-त्रिज्या: 10px उंची: 35px; पार्श्वभूमी: #FFFF00; कर्सर: पॉइंटर; रंग: #000; )

मुळात एवढेच. तुम्ही उदाहरणावरून पाहू शकता की, पॉपअप विंडोसाठी JavaScript दोन प्रकरणांमध्ये आवश्यक आहे:
1) आमची खिडकी बंद करण्याची घटना;
2) "सदस्यता घ्या" बटणावर क्लिक करण्यासाठी इव्हेंट;
ही विंडो या संगणकावर दर्शविली गेली आहे की नाही हे तपासण्यासाठी देखील त्रास होणार नाही. या हेतूंसाठी कुकीजसह कार्य करणे योग्य आहे.

जाहिरातीसह बाह्य पॉपअप विंडो भयंकर कल्पना आहेत! सर्व समजूतदार वेबमास्टर तुम्हाला ते तुमच्या वेबसाइटवर वापरण्याचा सल्ला देणार नाहीत. परंतु, जर आपण अंतर्गत पॉपअप विंडोबद्दल बोलत असाल तर, हा एक उपयुक्त घटक आहे जो अतिरिक्त माहिती प्रदान करतो, चेतावणी देतो, प्रतिबंधित करतो, निवडण्याची संधी देतो आणि बरेच काही.

आपण काय निर्माण करणार आहोत?

या ट्युटोरियलमध्ये आपण jquery वापरून एक साधी आणि सुंदर पॉपअप विंडो तयार करू. हे twitter वर वापरल्या जाणाऱ्या सारखेच असेल. स्वाभाविकच, आपण त्यास आपल्या आवडीची शैली देऊ शकता.

विंडोमध्ये कोणती कार्यक्षमता असेल?

• जेव्हा ते प्रदर्शित केले जाते तेव्हा ते साइट पृष्ठावर केंद्रित असावे अशी आमची इच्छा आहे.
• तेथे "बंद करा" बटण किंवा तत्सम काहीतरी असावे.
• ब्लॉकच्या बाहेर क्लिक केल्यावर पॉपअप विंडो आपोआप बंद होईल.
• जेव्हा विंडो प्रदर्शित होते, तेव्हा पृष्ठ सावलीत झाकलेले असावे जेणेकरून वापरकर्ता लक्ष केंद्रित करू शकेल.

विकासाला सुरुवात करूया

पॉपअप विंडो लागू करण्यासाठी, आम्ही CSS आणि jQuery कोडच्या काही ओळी आणि अर्थातच HTML वापरू. कृपया लक्षात घ्या की आमची कल्पना अंमलात आणण्यासाठी, तुम्हाला कोणत्याही प्लगइन्स किंवा अतिरिक्त साधनांची आवश्यकता नाही, सर्वकाही अगदी सोपे आणि विश्वासार्ह आहे!

मला क्लिक करा X काही शीर्षक येथे जाते: आणखी काही सामग्री, जेव्हा तुम्हाला थोडे अधिक जोडायचे असेल

पॉपअप-बॉक्स ( स्थिती: परिपूर्ण; सीमा-त्रिज्या: 5px; पार्श्वभूमी: #fff; डिस्प्ले: काहीही नाही; बॉक्स-छाया: 1px 1px 5px rgba(0,0,0,0.2); फॉन्ट-फॅमिली: Arial, sans-serif ; z-इंडेक्स: 9999999; .पॉपअप-बॉक्स .बंद कर्सर: पॉइंटर; रंग: #434343; फॉन्ट-आकार: 20px; .popup-box .top ( पॅडिंग: 20px; ) .popup-box .तळाशी (पार्श्वभूमी: #eee; बॉर्डर-टॉप: 1px सॉलिड #e5e5e5; पॅडिंग: 20px; बॉर्डर-खाली-डावी- त्रिज्या: 5px; सीमा-तळा -उजवे-त्रिज्या: 5px; ) #blackout (पार्श्वभूमी: rgba(0,0,0,0.3); स्थिती: absolute; top: 0; overflow: hidden; z-index: 999999; left : 0; प्रदर्शन: none;

आम्ही JavaScript कोडमध्ये काही इतर CSS शैली परिभाषित करू. या शैलींना अतिरिक्त गणना आवश्यक आहे, म्हणून jQuery वापरून ते करणे चांगले होईल. चला जावास्क्रिप्ट कोडकडे जाऊ.

jQuery विंडो पॉपअप कोड

सुरू करण्यासाठी, jQuery लायब्ररी फाइल समाविष्ट करा. त्यानंतर, आम्ही jQuery सुरू करतो आणि दस्तऐवजाच्या मुख्य भागामध्ये #blackout div जोडतो. आम्ही पॉपअप विंडोची रुंदी देखील निर्धारित करतो.

$(document).ready(function() ( $("body").append(""); var boxWidth = 400;

पुढे, आम्ही एक फंक्शन तयार करतो जे विंडोच्या मध्यभागी असते. पूर्वी आम्ही CSS मध्ये निरपेक्ष स्थिती सेट केली होती, आम्ही मार्जिन वापरू शकत नाही: 0px auto; आम्हाला स्क्रीनची रुंदी निश्चित करायची आहे, यामधून पॉपअप विंडोची रुंदी वजा करायची आहे आणि हे सर्व 2 ने विभाजित करणे आवश्यक आहे. उंची ही वर्तमान स्क्रोल स्थिती असेल, तसेच सुमारे 150px.

थोड्या वेळापूर्वी आम्ही #blackout div तयार केला, हे पृष्ठ सामग्रीला सावलीने कव्हर करण्यासाठी आहे. आता आपण हे सुनिश्चित करणे आवश्यक आहे की या ब्लॉकची रुंदी आणि उंची मॉनिटर सारखीच असेल. हे या फंक्शनमध्ये देखील मोजले जाते.

फंक्शन सेंटरबॉक्स() ( /* आवश्यक डेटा परिभाषित करा */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); / * स्थितीची गणना करा */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* ब्लॉक्समध्ये शैली जोडा */ $(."popup-box").css(("रुंदी" : boxWidth+ "px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("रुंदी" : winWidth+"px", "height" : winHeight+" px"); रिटर्न असत्य ;

हे कार्य 3 वेळा चालवणे आवश्यक आहे. जेव्हा वापरकर्ता स्क्रोल करतो, जेव्हा वापरकर्ता विंडोचा आकार बदलतो, तेव्हा देखील सुरवातीला जेव्हा पृष्ठ लोड होते.

$(window).resize(centerBox); $(विंडो).स्क्रोल(सेंटरबॉक्स); सेंटरबॉक्स();

शेवटी, आम्हाला क्लिक इव्हेंट सेट करणे आवश्यक आहे. जेव्हा वापरकर्ता विंडोच्या बाहेरील भागात क्लिक करतो तेव्हा ते बंद झाले पाहिजे. जेव्हा वापरकर्ता "X" वर क्लिक करतो तेव्हा विंडो देखील अदृश्य व्हायला हवी. पॉपअप विंडोमध्ये क्लिकच्या बाबतीत, काहीही होऊ नये. कोडमध्ये टिप्पण्या जोडल्या गेल्या आहेत जेणेकरून ते समजणे सोपे होईल.

$("").क्लिक(function(e) ( /* prevent default actions */ e.preventDefault(); e.stopPropagation(); /* आयडी मिळवा (लिंक वर्गाच्या नावातील शेवटचा क्रमांक) */ var name = $(this).attr("वर्ग"); var स्क्रॉलपॉस = $(विंडो).स्क्रोलटॉप(/* स्क्रोलिंग प्रतिबंधित करणे #popup-box -"+id).show(); $("#blackout").show(); $("html,body").css("ओव्हरफ्लो", "लपलेले"); /* फिक्सिंग Firefox मधील बग */ $("html").scrollTop(scrollPos)); $("").क्लिक(फंक्शन(ई) ( /* ही आमची पॉपअप विंडो असेल तर दुवा काम करण्यापासून प्रतिबंधित करा */ e.stopPropagation(); )); $("html").क्लिक(function() ( var scrollPos = $(window).scrollTop(); /* विंडो त्याच्या क्षेत्राबाहेर क्लिक केल्यावर लपवा */ $("").hide(); $(" #blackout").hide(); $("html,body").css("ओव्हरफ्लो","ऑटो"); $("html").scrollTop(scrollPos); )); $(".close").क्लिक(function() ( var scrollPos = $(window).scrollTop(); /* जेव्हा वापरकर्ता X */ $("") वर क्लिक करतो तेव्हा सावली आणि विंडो लपवा. hide() ;$("#blackout").hide($("html,body").css("ओव्हरफ्लो","ऑटो").scrollTop(scrollPos)); ));

यासह, jQuery वापरून पॉपअप विंडो तयार करणे पूर्ण झाले आहे! आम्हाला प्लगइन डाउनलोड करण्याची आणि जटिल फंक्शन्स लिहिण्याची गरज नाही, कोडच्या काही ओळी. तुम्ही स्त्रोत डाउनलोड करू शकता आणि ते तुमच्या संगणकावर स्थानिक पातळीवर कसे कार्य करते ते पाहू शकता.

पॉपअप बॉक्स ही एक पॉप-अप जाहिरात आहे जी वेब रहदारीला आकर्षित करण्यासाठी किंवा ईमेल पत्ते गोळा करण्यासाठी डिझाइन केलेली आहे. असे घटक अनेकदा वर्ल्डवाइड वेबवरील इंटरनेट जाहिरातींचे स्वरूप असतात. सामान्यतः, या नवीन विंडो आहेत ज्या वेब ब्राउझरमध्ये जाहिराती प्रदर्शित करण्यासाठी उघडतात. ते सामान्यत: क्रॉस-साइट स्क्रिप्टिंग (XSS) वापरून JavaScript द्वारे व्युत्पन्न केले जातात, कधीकधी दुय्यम पेलोडसह आणि AdobeFlash वापरून.

पॉपअपची भिन्नता म्हणजे पॉप-अप जाहिराती ज्या सक्रिय विंडोमध्ये लपलेल्या नवीन ब्राउझर विंडोमध्ये उघडतात.

उत्पत्तीचा इतिहास

1990 च्या दशकाच्या उत्तरार्धात Tripod.com वर पहिल्या पॉप-अप जाहिराती दिसल्या. एथन झुकरमनचा दावा आहे की त्याने बॅनर जाहिरातींच्या तक्रारींना प्रतिसाद म्हणून वैयक्तिक विंडोमध्ये जाहिराती चालवण्यासाठी कोड लिहिला आहे. त्यानंतर, विकासकाने त्याच्या शोधामुळे होणाऱ्या गैरसोयीबद्दल वारंवार माफी मागितली.

ऑपेरा हे पॉप-अप ब्लॉकिंग टूल्स समाविष्ट करणारे पहिले मोठे ब्राउझर होते. Mozilla ब्राउझरने नंतर पृष्ठ लोड झाल्यावर व्युत्पन्न केलेली पॉपअप विंडो अवरोधित करून या घडामोडींमध्ये सुधारणा केली. 2000 च्या दशकाच्या सुरुवातीला, इंटरनेट एक्सप्लोरर वगळता सर्व प्रमुख वेब ब्राउझरने वापरकर्त्याला अवांछित पॉप-अप जाहिराती जवळजवळ पूर्णपणे काढून टाकण्याची परवानगी दिली. 2004 मध्ये, मायक्रोसॉफ्टने Windows XP SP2 जारी केले, ज्याने या ब्राउझरमध्ये ब्लॉकिंग जोडले.

बहुतेक आधुनिक ब्राउझर पॉप-अप संरक्षण साधनांसह येतात. तृतीय-पक्ष साधनांमध्ये सहसा इतर वैशिष्ट्ये समाविष्ट असतात, जसे की जाहिरात फिल्टरिंग.

पॉपअप विंडो

डाउनलोड केलेल्या सामग्रीचे काही प्रकार - प्रतिमा, विनामूल्य संगीत आणि इतर - पॉप-अप होऊ शकतात. याव्यतिरिक्त, ते कधीकधी सामान्य वेब पृष्ठांसारखे दिसतात आणि साइटचे नाव शोध बारमध्ये दिसून येईल. अनेक संसाधने सध्या उघडलेल्या पृष्ठामध्ये व्यत्यय न आणता माहिती प्रदर्शित करण्यासाठी पॉप-अप विंडो वापरतात. उदाहरणार्थ, जर तुम्ही वेब पेजवर फॉर्म भरला असेल आणि तुम्हाला अतिरिक्त मार्गदर्शनाची गरज असेल, तर PopUP विंडो तुम्हाला फॉर्ममध्ये आधीच एंटर केलेला कोणताही डेटा गमावू न देता तुम्हाला अतिरिक्त माहिती देईल. बहुतेक पॉप-अप जाहिरात ब्लॉकर्स या प्रकारच्या डाउनलोडिंगला परवानगी देतात.

परंतु हे लक्षात ठेवा की काही वेब इंस्टॉलर, जसे की McAfee द्वारे वापरलेले, सॉफ्टवेअर स्थापित करण्यासाठी पॉप-अप विंडो वापरतात. अनेक इंटरनेट ब्राउझरवर, लिंकवर क्लिक करताना Ctrl की दाबल्याने फिल्टर बायपास होईल.

या प्रकरणात, एका पॉप-अप विंडोवर (अगदी चुकूनही) क्लिक केल्याने इतर उघडू शकतात.

बायपास पॉप-अप ब्लॉकर

बॅनर जाहिरात आणि पॉप-अप विंडोचे संयोजन ही एक "होवर जाहिरात" आहे जी पृष्ठ सामग्रीच्या शीर्षस्थानी स्क्रीनवर प्रदर्शित करण्यासाठी DHTML वापरते. JavaScript वापरून, जाहिरात वेब पृष्ठाच्या शीर्षस्थानी पारदर्शक लेयरमध्ये आच्छादित केली जाऊ शकते. ही जाहिरात जाहिरातदाराला हवी असलेली जवळपास सर्व प्रकरणांमध्ये दिसू शकते. अशी पॉपअप विंडो स्क्रिप्ट आगाऊ लक्षात येऊ शकत नाही. उदाहरणार्थ, जाहिरातीत जाहिरातदाराच्या साइटशी लिंक केलेले AdobeFlash ॲनिमेशन असू शकते. हे नेहमीच्या खिडकीसारखे देखील दिसू शकते. जाहिराती वेबपृष्ठाचा भाग असल्याने, त्यांना ब्लॉकर वापरून अवरोधित केले जाऊ शकत नाही, परंतु तृतीय-पक्ष अनुप्रयोग (जसे की AdBlock आणि AdblockPlus) वापरून किंवा सानुकूल शैली पत्रके वापरून त्यांना उघडण्यापासून प्रतिबंधित केले जाऊ शकते.

पॉपअंडर

ही जाहिरात नेहमीच्या पॉपअप विंडोसारखीच आहे, परंतु ती मुख्य ब्राउझर विंडोच्या समोर दिसण्याऐवजी लपलेली दिसते. जेव्हा पॉप-अप जाहिराती मोठ्या प्रमाणावर पसरल्या आणि संपूर्ण संगणक स्क्रीन घेण्यास सुरुवात केली, तेव्हा बरेच वापरकर्ते त्या न पाहता त्वरित बंद करण्यास शिकले. म्हणूनच PopUNDER दिसला, जो वापरकर्त्याच्या साइटची सामग्री पाहण्यात व्यत्यय आणत नाही. मुख्य ब्राउझर विंडो बंद किंवा लहान होईपर्यंत ते सामान्यत: सापडत नाहीत. संशोधनात असे दिसून आले आहे की वापरकर्ते या जाहिरातींना पॉप-अप जाहिरातींपेक्षा चांगला प्रतिसाद देतात कारण त्या अनाहूतपणे दिसत नाहीत.

लोकप्रिय जाहिरात तंत्रज्ञान

जाहिरात नेटस्केप 2.0B3 ब्राउझरसह 1997 मध्ये सादर केलेल्या दोन अतिशय सोप्या JavaScript फंक्शन्सचा वापर करते. ही पद्धत इंटरनेटवर मोठ्या प्रमाणावर वापरली जाते. आधुनिक वेब प्रकाशक आणि जाहिरातदार याचा वापर पृष्ठ सामग्रीच्या समोर एक विंडो तयार करण्यासाठी, जाहिरात लोड करण्यासाठी आणि नंतर स्क्रीनवरून पाठवण्यासाठी करतात.

बहुतेक आधुनिक ब्राउझर केवळ जेव्हा काही वापरकर्ता परस्परसंवाद असतो (जसे की माउस क्लिक) तेव्हाच पॉपअप पॉपअप उघडण्याची परवानगी देतात. कोणतेही गैर-परस्परसंवादी कॉल (टाइमर कॉलबॅक, लोड इव्हेंट इ.) नवीन विंडो अवरोधित केल्या जातील. या मर्यादेपर्यंत पोहोचण्यासाठी, बहुतेक पॉप-अप जाहिराती थेट दस्तऐवज किंवा दस्तऐवजाच्या मुख्य भागाशी संलग्न असलेल्या माउस इव्हेंट लिसनरचा वापर करून ट्रिगर केल्या जातात. हे तुम्हाला पृष्ठावरील सर्व माउस क्लिक्स कॅप्चर करण्यास अनुमती देते जे इतर इव्हेंट हँडलर्सद्वारे वापरले जात नव्हते. उदाहरणार्थ, जेव्हा वापरकर्ता मजकूर निवडतो, तेव्हा दस्तऐवजाशी संलग्न श्रोत्याद्वारे माउस क्लिक शोधले जाते. हे वरील कोड वापरून एक पॉपअप विंडो उघडेल.

"ट्रिकी" पॉपअप विंडो जनरेटर

ब्राउझर वापरताना विविध वेबसाइट्स आणि वेब ॲप्लिकेशन्सचे वापरकर्ते सतत अवांछित पॉप-अप्सचा सामना करतात. सामान्यतः, अशी पॉपअप विंडो "बंद करा" किंवा "रद्द करा" फंक्शन वापरून काढली जाते. हा एक सामान्य वापरकर्ता प्रतिसाद असल्याने, विकसकांनी काही युक्त्या वापरण्यास सुरुवात केली. अशा प्रकारे, जाहिरात संदेश विकसित करताना, ऑन-स्क्रीन बटणे किंवा नियंत्रणे तयार केली जातात जी "बंद करा" किंवा "रद्द करा" पर्यायासारखी असतात. तथापि, जेव्हा वापरकर्ता यापैकी एक पर्याय निवडतो, तेव्हा बटण अनपेक्षित किंवा अनधिकृत कृती करते (उदाहरणार्थ, नवीन पॉप-अप विंडो उघडणे किंवा वापरकर्त्याच्या सिस्टमवर नको असलेली फाइल डाउनलोड करणे).

कारण वेब डिझाइन तंत्रज्ञान लेखकांना कोणत्याही प्रकारचे “बनावट” वापरण्याची परवानगी देतात, काही वापरकर्ते पॉप-अप विंडोमधील कोणत्याही घटकावर क्लिक करण्यास किंवा त्याच्याशी संवाद साधण्यास अजिबात नकार देतात.

URL पुनर्निर्देशित

कधीकधी पार्श्वभूमी URL पुनर्निर्देशन वैशिष्ट्य वापरून URL जाहिरात पृष्ठांवर पुनर्निर्देशित केले जातात. ते कधीकधी नवीन टॅबमध्ये उघडतात आणि नंतर जुन्या पार्श्वभूमी टॅबची सामग्री पुनर्निर्देशन वापरून जाहिरात पृष्ठांसह बदलली जाते. AdblockPlus, uBlock किंवा NoScript हे पॉप-अप पुनर्निर्देशन अवरोधित करू शकत नाहीत. पॉपअप विंडोला सर्वात सक्रिय बनवण्याच्या मार्गाच्या शोधात जाहिरात वितरकांकडून हे वैशिष्ट्य वाढत्या प्रमाणात वापरले जात आहे.

पॉप-अप्सपासून मुक्त कसे व्हावे

ब्राउझरमधील जाहिराती कशा काढायच्या? सर्व प्रथम, अद्यतने तपासा. तुमचा ब्राउझर अद्ययावत ठेवल्याने पॉप-अपचा सामना करण्यासाठी खूप मदत होईल. बहुतेक ब्राउझर स्वयंचलितपणे अपडेट करण्यासाठी सेट केले जातात, परंतु हे बंद केले जाऊ शकते. या प्रक्रियेस सहसा काही मिनिटे लागतात.

• फायरफॉक्स: वरच्या डाव्या कोपर्यात ॲप नाव बटणावर क्लिक करा. मदत वर माउस फिरवा आणि फायरफॉक्स बद्दल निवडा. हे ब्राउझर आवृत्ती माहितीसह एक विंडो उघडेल. जर तुमचा ब्राउझर आपोआप डाउनलोड आणि इन्स्टॉल होत नसेल.
• Chrome: वरच्या उजव्या कोपर्यात मेनू बटण क्लिक करा. तळाशी "Chrome बद्दल" निवडा, एक नवीन टॅब उघडेल आणि ब्राउझर अद्यतनांसाठी तपासेल. काही असल्यास, ते स्वयंचलितपणे स्थापित केले जातील.
• इंटरनेट एक्सप्लोरर: अपडेट पद्धत तुम्ही वापरत असलेल्या ब्राउझर आवृत्तीवर अवलंबून असते. जुन्या पर्यायांसाठी, तुम्हाला विंडोज अपडेट एंटर करावे लागेल. Internet Explorer 10 आणि 11 साठी, तुम्ही Gear चिन्हावर क्लिक करून आणि Internet Explorer बद्दल निवडून स्वयंचलित अद्यतने चालू करू शकता.

अद्यतने मदत करत नसल्यास

काहीवेळा वेबसाइट पॉपअप आणि तत्सम सॉफ्टवेअर अद्यतनित करून काढता येण्यासारखे खूप खोलवर एम्बेड केलेले असतात. अशा परिस्थितीत, तुमचा वेब ब्राउझर पुन्हा स्थापित करणे किंवा बदलणे समस्येचे निराकरण करण्यात मदत करू शकते.

प्रथम, आपण वापरू इच्छित असलेल्या ब्राउझरची नवीनतम आवृत्ती डाउनलोड करा. आपण प्रत्येक अनुप्रयोगाच्या मुख्य पृष्ठावर डाउनलोड दुवे शोधू शकता.