Mar 29, 2020
JQuery realizes the prompt effect of clicking the text box to pop up the hot tag


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Click text box to pop up the hot label example _ Webpage code station </title>
<style type="text/css">
body {
font-size:12px;font-family:Arial;
}
#m_tagsItem {
background:#fff;
position:absolute;
top:0px;
left:0px;
overflow:hidden;
width:590px;
*width:561px;
width:561px9;
padding:10px;
border:1px solid #ccc;
z-index:1000;
display:none;
}
#m_tagsItem p {
text-align:left;
line-height:22px;
padding:2px 0;
margin:0;
border:0;
}
#m_tagsItem span {
font-weight:bold;
}
#m_tagsItem a {
margin:0 5px;
}
.m_tagsname {
color:#999;
vertical-align:middle;
font-size:12px;
text-indent:3px;
line-height:20px;
}
#tagClose {
font-size:12px;
color:#888;
cursor:pointer;
position:absolute;
top:2px;
right:2px;
}
</style>
<script src="http://www.webdm.cn/themes/script/jquery.js"></script>
<script language="javascript">
(function ($) {
$.fn.bgIframe = $.fn.bgiframe = function (s) {
if ($.browser.msie && /6.0/.test(navigator.userAgent)) {
s = $.extend({
top: 'auto', // auto == .currentStyle.borderTopWidth
left: 'auto', // auto == .currentStyle.borderLeftWidth
width: 'auto', // auto == offsetWidth
height: 'auto', // auto == offsetHeight
opacity: true,
src: 'javascript:false;'
}, s || {});
var prop = function (n) { return n && n.constructor == Number ? n + 'px' : n; },
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="' + s.src + '"' +
'style="display:block;position:absolute;z-index:-1;' +
(s.opacity !== false ? 'filter:Alpha(Opacity='0');' : '') +
'top:' + (s.top == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+'px')' : prop(s.top)) + ';' +
'left:' + (s.left == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+'px')' : prop(s.left)) + ';' +
'width:' + (s.width == 'auto' ? 'expression(this.parentNode.offsetWidth+'px')' : prop(s.width)) + ';' +
'height:' + (s.height == 'auto' ? 'expression(this.parentNode.offsetHeight+'px')' : prop(s.height)) + ';' +
'"/>';
return this.each(function () {
if ($('> iframe.bgiframe', this).length == 0)
this.insertBefore(document.createElement(html), this.firstChild);
});
}
return this;
};
})(jQuery);
jQuery.fn.selectCity = function (targetId) {
var _seft = this;
var targetId = $(targetId);
this.click(function () {
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1
var A_left = $(this).offset().left;
targetId.bgiframe();
targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });
});
targetId.find("#tagClose").click(function () {
targetId.hide();
});
$(document).click(function (event) {
if (event.target.id != _seft.selector.substring(1)) {
targetId.hide();
}
});
targetId.click(function (e) {
e.stopPropagation(); // 2
});
return this;
}
$(function () {
$("#selecttags").selectCity("#m_tagsItem");
});
//Continuously assign values to text fields
function checktag(o) {
var tagid = function (id) { return document.getElementById(id); }
var tags = []; //Store labels to avoid repeated addition
var tagidSPLITCHAR = ' '; //Set the separator, which can be changed according to the program requirements
var d = tagid('selecttags');
if (d.value)
tags = d.value.split(tagidSPLITCHAR);
var v = o.innerHTML; //If the tag has another value or something other than the innerHTML
var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR
if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s)) {
s += v;
}
s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), '');
d.value = s;
tags = s.split(tagidSPLITCHAR);
}
</script>
</head>
<body>
 If there is no prompt, please refresh the page and try again ~
<input type="text" id="selecttags" name="m_tagsname" class="m_tagsname" style="width: 577px"
value=" Click to see the hot tabs and the ones you've used " onclick="if(this.value==' Click to see the hot tabs and the ones you've used '){this.value='';this.className='m_tagsname'}">
<div id="m_tagsItem" style="display: none">
<div id="tagClose">
 Shut down </div>
<p>
<span> Warm tips: </span> Use "space," "comma," or "semicolon" between tags to summarize your post in simple words. </p>
<p>
<span> Hot tags: </span><a href="javascript:void(0)" onclick="checktag(this)"> Colour makeup </a><a
href="javascript:void(0)" onclick="checktag(this)"> Hair salon </a><a href="javascript:void(0)"
onclick="checktag(this)"> The best blog </a><a href="javascript:void(0)" onclick="checktag(this)">aaa</a><a
href="javascript:void(0)" onclick="checktag(this)">bbb</a><a href="javascript:void(0)"
onclick="checktag(this)"> heaven </a><a href="javascript:void(0)" onclick="checktag(this)">eee</a><a
href="javascript:void(0)" onclick="checktag(this)">fff</a><a href="javascript:void(0)"
onclick="checktag(this)">ggg</a></p>
<p>
<span> Tags you have used: </span><a href="javascript:void(0)" onclick="checktag(this)"> software </a><a
href="javascript:void(0)" onclick="checktag(this)">Delphi</a><a href="javascript:void(0)"
onclick="checktag(this)"> blog </a><a href="javascript:void(0)" onclick="checktag(this)"> The source code </a><a
href="javascript:void(0)" onclick="checktag(this)"> Colour makeup </a><a href="javascript:void(0)"
onclick="checktag(this)">google</a><a href="javascript:void(0)" onclick="checktag(this)"> sina </a></p>
</div>
<br />
<p>
<a href="http://www.webdm.cn"> Webpage code station </a> -  The most professional web code download site  -  Committed to providing quality webmaster code for China! </p>
</body>

</html>