moreInfo id-тай input элемэнт дээр дарахад box гарч ирнэ
moreInfoBox id-тай div дотор манай харуулахыг хүссэн мэдээлэл байна
<div id="moreInfo">
<input type="button" id="moreInfo" value="More Info">
<div id="moreInfoBox" class="moreInfoBox">
<div id="moreInfoClose" class="moreInfoClose">
Close
</div>
<h3>Title</h3>
Need help, huh? There you go...
<div>
This is a text in a div element
</div>
</div>
</div>
Толгой хэсэн (<head></head>) доорх script-ийг бичиж өгье
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var moreInfoClicked=0;
$("div#moreInfoBox").hide();
$("input#moreInfo").click(function(){
if(moreInfoClicked==1) { $("div#moreInfoBox").fadeOut("normal"); moreInfoClicked=0; $("input#moreInfo").val("More info"); }
else { $("div#moreInfoBox").fadeIn("normal"); moreInfoClicked=1; $("input#moreInfo").val("Less info"); }
});
$("div#moreInfoClose").click(function(){
if(moreInfoClicked==1) { $("div#moreInfoBox").fadeOut("normal"); moreInfoClicked=0; $("input#moreInfo").val("More info"); }
});
});
</script>
Бага зэргийн хэлбэржүүлэлт хийгээд толгой хэсэгт доорх style-ийг тодорхойлж өгье.
<style type="text/css">
#moreInfo .moreInfoBox{
background-color:transparent;
width:600px;
height:450px;
border:1px solid;
text-align:center;
position:fixed;
z-index:10;
position:absolute;
left:50%;
margin-left:-300px;
}
#moreInfo .moreInfoClose{
display:inline-block;
position:absolute;
right:0;
}
</style>
Source code-ийг доорх холбоосоор татаж авна уу.
Татах
<div id="moreInfo">
<input type="button" id="moreInfo" value="More Info">
<div id="moreInfoBox" class="moreInfoBox">
<div id="moreInfoClose" class="moreInfoClose">
Close
</div>
<h3>Title</h3>
Need help, huh? There you go...
<div>
This is a text in a div element
</div>
</div>
</div>
Толгой хэсэн (<head></head>) доорх script-ийг бичиж өгье
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var moreInfoClicked=0;
$("div#moreInfoBox").hide();
$("input#moreInfo").click(function(){
if(moreInfoClicked==1) { $("div#moreInfoBox").fadeOut("normal"); moreInfoClicked=0; $("input#moreInfo").val("More info"); }
else { $("div#moreInfoBox").fadeIn("normal"); moreInfoClicked=1; $("input#moreInfo").val("Less info"); }
});
$("div#moreInfoClose").click(function(){
if(moreInfoClicked==1) { $("div#moreInfoBox").fadeOut("normal"); moreInfoClicked=0; $("input#moreInfo").val("More info"); }
});
});
</script>
Бага зэргийн хэлбэржүүлэлт хийгээд толгой хэсэгт доорх style-ийг тодорхойлж өгье.
<style type="text/css">
#moreInfo .moreInfoBox{
background-color:transparent;
width:600px;
height:450px;
border:1px solid;
text-align:center;
position:fixed;
z-index:10;
position:absolute;
left:50%;
margin-left:-300px;
}
#moreInfo .moreInfoClose{
display:inline-block;
position:absolute;
right:0;
}
</style>
Source code-ийг доорх холбоосоор татаж авна уу.
Татах
Iimerhvv yumnuuud ihiig hiiwel goyo yum bna. Daraachiihiig ni hvleej bna.
ReplyDelete