मैं एक वेब पेज डिजाइन कर रहा हूं। जब हम div नाम की सामग्री को मेल पर क्लिक करते हैं, तो मैं लेबल ईमेल और टेक्स्ट बॉक्स वाली पॉपअप विंडो कैसे दिखा सकता हूं?
जवाबों:
पहले सीएसएस - आप इसे पसंद करते हैं, लेकिन इसे ट्वीक करें
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
और जावास्क्रिप्ट:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
और अंत में HTML:
<div class="messagepop pop">
<form method="post" id="new_message" action="/messages">
<p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
<p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
<p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
<a href="/contact" id="contact">Contact Us</a>
यहाँ एक jsfiddle डेमो और कार्यान्वयन है।
स्थिति के आधार पर आप अजाक्स कॉल के माध्यम से पॉपअप सामग्री लोड करना चाह सकते हैं। इससे बचना सबसे अच्छा है यदि संभव हो तो सामग्री को देखने से पहले उपयोगकर्ता को अधिक महत्वपूर्ण देरी दे सकता है। यदि आप इस दृष्टिकोण को अपनाते हैं तो यहां कुछ परिवर्तन किए जाएंगे, जिन्हें आप करना चाहते हैं।
HTML बन जाता है:
<div>
<div class="messagepop pop"></div>
<a href="/contact" id="contact">Contact Us</a>
</div>
और जावास्क्रिप्ट का सामान्य विचार बन जाता है:
$("#contact").on('click', function() {
if($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$.get(this.href, function(data) {
$(".pop").html(data).slideFadeToggle(function() {
$("input[type=text]:first").focus();
});
}
}
return false;
});
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
की जाँच करें jQuery यूआई संवाद । आप इसे इस तरह उपयोग करेंगे:
JQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
मार्कअप:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>किया हुआ!
ध्यान रखें कि सबसे सरल उपयोग-मामले के बारे में है, मैं सिर्फ एक बेहतर विचार प्राप्त करने के लिए प्रलेखन पढ़ने का सुझाव दूंगा कि इसके साथ क्या किया जा सकता है।
मैं ColorBox नामक jQuery प्लगइन का उपयोग करता हूं , यह है
शानदार पॉपअप का प्रयास करें , यह उत्तरदायी है और लगभग 3KB वजन है।
इस यूआरएल पर जाएं
मुझे लगता है कि यह एक साधारण jquery पॉपअप लिखने पर एक महान ट्यूटोरियल है । साथ ही यह बहुत सुंदर दिखता है
इस का एक अच्छा, सरल उदाहरण है, यहाँ: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
बेहद हल्के मोडल पॉपअप प्लगइन। POPELT - http://welbour.com/labs/popelt/
यह हल्का है, नेस्टेड पॉपअप का समर्थन करता है, ऑब्जेक्ट ओरिएंटेड है, डायनामिक बटन, उत्तरदायी और बहुत कुछ का समर्थन करता है। अगले अपडेट में पॉपअप अजाक्स फॉर्म सबमिशन आदि शामिल होंगे।
प्रतिक्रिया का उपयोग करने और ट्वीट करने के लिए स्वतंत्र महसूस करें।
Html5 और जावास्क्रिप्ट का उपयोग करके सरल पॉपअप विंडो।
एचटीएमएल: -
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button> जावास्क्रिप्ट: -
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();TypeError: dialog.show is not a functionत्रुटि मिलती है । क्या आप एक JSFiddle को हटा सकते हैं?
यहाँ एक बहुत ही सरल पॉपअप है:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight()) / 2,
left: ($(window).width() - $modal.outerWidth()) / 2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>अधिक लचीला समाधान इस ट्यूटोरियल में पाया जा सकता है: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ यहाँ है close.png नमूने के लिए।
केवल सीएसएस पॉपअप लोगो! यह कोशिश करो। आसान! मुझे लगता है कि यह मिथक भविष्य में लोकप्रिय हो जाएगा
<a href="#openModal">OPEN</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="close">X</a>
<h2>MODAL</h2>
</div>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}