প্রথমে সিএসএস - আপনার পছন্দ মতো এটি টুইট করুন:
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);
};
এবং অবশেষে এইচটিএমএল:
<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 ডেমো এবং বাস্তবায়ন।
অবস্থার উপর নির্ভর করে আপনি পপআপ সামগ্রীটি একটি অজ্যাক্স কলের মাধ্যমে লোড করতে চাইতে পারেন। সম্ভব হলে এটি এড়ানো ভাল কারণ এটি সামগ্রীটি দেখার আগে ব্যবহারকারীকে আরও গুরুত্বপূর্ণ বিলম্ব দিতে পারে। আপনি যদি এই পদ্ধতিকে গ্রহণ করেন তবে এখানে কিছু পরিবর্তন করতে হবে যা আপনি করতে চান want
এইচটিএমএল হয়ে যায়:
<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;
});