Demo: http://fcatest4.forumvi.com/ Nhập từ khóa bất kì trong khung ở thanh nav rồi nhấn cái nút be bé xinh xinh bên cạnh
Cái này méo đã thử ở Invision, một số phiên bản khác chắc cũng thế =))
Thêm ở đâu đó trong Overall_Header
Thêm vào CSS:
Thêm vào cuối Overall_Footer_End
Cái này méo đã thử ở Invision, một số phiên bản khác chắc cũng thế =))
Thêm ở đâu đó trong Overall_Header
- Code:
<div class="finding">
<form action="/search?mode=results" method="get" name="searchform">
<input type="text" name="search_keywords" style="width: 270px;" id="keyfind" required/>
<input type="hidden" name="google" value=""/>
<input id="clicktofind" type="submit" value="" onclick="document.searchform.google.value='';" class="button"/>
</form>
</div>
<div class="showmyfind">Từ khóa đã tìm: <span class="key"></span>
<div class="showfind"></div>
</div>
<div class="closefind"></div>
Thêm vào CSS:
- Code:
/* Search */
.finding {padding: 12px;background: #fff;position:fixed;bottom:0;right:20px}
.showmyfind {display:none;text-align: center;position: fixed;width: 90%;height: 80%;background: #fff;top: 10%;left: 5%;box-shadow: 0 0 10px;padding:10px}
.closefind {display:none;background: url(http://www.iconsdb.com/icons/preview/black/close-window-m.png) center no-repeat;width: 40px;height: 40px;position: fixed;right: 0;top: 0;cursor: pointer;}
.showmyfind .msg {padding: 10px;background: #fff;border: 1px solid #d7d7d7;}
.showmyfind .showfind {text-align: left;margin-top: 10px;}
Thêm vào cuối Overall_Footer_End
- Code:
<script>
$(function(){
$('.finding #clicktofind').click(function(stop){
stop.preventDefault();
$('.showmyfind').delay(800).fadeIn(250);
$('.closefind').show();
kword = $('.finding #keyfind').val();
$('.showmyfind .key').text(kword);
$('.showfind').load('/search?search_keywords='+kword+' .borderwrap');
});
$('.closefind').click(function(){
$('.showmyfind').delay(0).fadeOut(250);
$(this).hide();
});
});
</script>