0
這是我在純Javascript中彈出的代碼。
當您在圓圈內單擊時，彈出框。
我需要製作一個彈出窗口淡入的動畫。
但是我需要在純JS和HTML DOM Style或其他JS函數中做到這一點。
使我的Popup淡入HTML DOM CSS（JS）
var iQueueChat = function() {
this.textAlign = "center";
this.width = 250;
this.height = 444;
this.createFrame();
this.useRotate = !(/MSIE [89]\./.test(navigator.userAgent))
};
///////////////////////////////////////////////////////////////////////////
function mouseOver(x) {
x.style.backgroundColor = 'rgba(141, 141, 141, 0.5)';
}
function mouseOut(x) {
x.style.backgroundColor = 'rgba(211, 211, 211, 0.5)';
}
//////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.chatParams = function() {
var id = document.getElementById("iQueueChat").attributes.getNamedItem("src").value.split('#')[1];
var referrer = document.referrer;
var div = document.div;
var title = document.title;
var url = document.location.href;
return "?id=" + encodeURIComponent(id) +
"&referrer=" + encodeURIComponent(referrer) +
"&title=" + encodeURIComponent(title) +
"&urel=" + encodeURIComponent(url)
}
//////////////////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.createFrame = function() {
this.container = document.body.appendChild(document.createElement('div'));
this.container.style.display = 'none';
this.container.style.zIndex = '9999999';
this.container.style.right = '3%';
this.container.style.height = this.height + 'px';
\t this.container.style.boxShadow = "1px 4px 20px 0px ";
this.frame = this.container.appendChild(document.createElement('div'));
this.frame.style.backgroundColor = 'white';
\t this.frame.style.border = '1px solid black';
this.title = this.frame.appendChild(document.createElement('div'));
this.title.style.textAlign = 'center';
\t this.div = document.createElement('div');
\t // set style of div
\t this.div.style.backgroundImage = 'url("'+ this.icon1 +'")';
\t this.div.style.width = '56px';
\t this.div.style.height = '56px';
\t this.div.style.backgroundSize = '35px 35px';
this.div.style.backgroundRepeat = 'no-repeat';
this.div.style.backgroundPosition = 'center center';
\t this.div.style.zIndex = '9999999';
\t this.div.style.display = 'block';
\t this.div.style.position = 'fixed';
\t this.div.style.bottom = '3%';
\t this.div.style.right = '3%';
\t this.div.style.backgroundColor = 'rgba(211, 211, 211, 0.7)';
\t this.div.style.backgroundImage = 'url("'+ this.icon1 +'")';
\t this.div.style.borderWidth = '1px';
\t this.div.style.borderStyle = 'solid';
\t this.div.style.cursor = 'pointer';
this.div.style.textAlign = 'center';
this.div.style.borderRadius = "50%";
\t this.div.style.borderColor = 'gray';
\t this.div.onmouseover = function() {mouseOver(this)};
\t this.div.onmouseout = function() {mouseOut(this)};
\t this.div.setAttribute("id", "Div1");
\t document.body.appendChild(this.div);
\t this.div.iQueueChat = this;
\t EventHandler.bind(this.div, 'click', function(event) {
\t \t EventHandler.stopHere(event);
\t \t this.iQueueChat.toggle();
})
this.iframe = document.createElement('iframe')
this.iframe.frameBorder = 0;
this.iframe.style.display = 'none';
this.iframe.style.width = '100%';
this.iframe.style.scrolling = 'no';
this.iframe.style.borderRadius = '8px';
this.iframe.style.opacity = 1;
this.iframe.style.height = this.height + 'px';
if (isMobile.any) {
this.iframe.setAttribute('src', this.url + '&mobile=no');
} else {
this.iframe.setAttribute('src', this.url);
}
this.frame.appendChild(this.iframe);
}
/////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.initialize = function(data) {
this.id = document.getElementById("iQueueChat").attributes.getNamedItem("src").value.split('#')[1];
this.title.innerHTML = '';
var icon = document.createElement('img');
if (data.status == 'online') {
icon.src = 'https://chat.intratel.nl' + this.id.replace('{','/').replace('}','/') + 'onlineicon.png';
} else {
icon.src = 'https://chat.intratel.nl' + this.id.replace('{','/').replace('}','/') + 'offlineicon.png';
}
icon.setAttribute('align', 'center');
icon.setAttribute('hspace', 8);
icon.width = 20;
this.title.style.display = 'none';
this.div.style.backgroundRepeat = 'no-repeat';
this.div.style.backgroundPosition = 'center center';
this.div.style.backgroundImage = 'url("'+ this.icon1 +'")';
this.div.style.backgroundSize = '35px';
this.div.style.backgroundRepeat = 'no-repeat';
this.div.style.backgroundPosition = 'center center';
this.frame.style.color = data.color.text;
this.frame.style.borderWidth = '1px';
this.frame.style.borderStyle = 'solid';
this.frame.style.borderColor = 'black';
this.container.style.position = 'fixed';
this.position = data.position;
this.applyPosition();
}
iQueueChat.prototype.applyPosition = function() {
if (!this.position) {
this.position = {
vertical: 'right',
horizontal: 'bottom'
};
this.container.style.position = 'fixed';
}
this.frame.style.width = this.width + 'px';
this.frame.style.height = this.height + 'px';
this.frame.style.top = '0px';
this.iframe.style.position = 'relative';
this.iframe.style.top = '0px';
if (this.useRotate) {
this.positionRotate()
} else {
this.positionLegacy();
}
}
/////////////////////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.applyBorderRadius = function(position, enabled) {
var radiuse = enabled ? '50%' : '50%';
var radiusFrame = enabled ? '10px' : '10px';
this.div.style['webkitBorder' + position + 'Radius'] = radiuse;
this.div.style['mozBorder' + position + 'Radius'] = radiuse;
this.div.style['oBorder' + position + 'Radius'] = radiuse;
this.div.style['border' + position + 'Radius'] = radiuse;
this.frame.style['webkitBorder' + position + 'Radius'] = radiusFrame;
this.frame.style['mozBorder' + position + 'Radius'] = radiusFrame;
this.frame.style['oBorder' + position + 'Radius'] = radiusFrame;
this.frame.style['border' + position + 'Radius'] = radiusFrame;
this.container.style['webkitBorder' + position + 'Radius'] = radiusFrame;
this.container.style['mozBorder' + position + 'Radius'] = radiusFrame;
this.container.style['oBorder' + position + 'Radius'] = radiusFrame;
this.container.style['border' + position + 'Radius'] = radiusFrame;
}
///////////////////////////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.positionLegacy = function() {
this.title.style.writingMode = 'inherit';
switch (this.position.horizontal) {
case 'center': this.container.style.bottom = '13%';
this.container.style.height = '1px';
this.frame.style.position = 'relative';
this.frame.style.top = (0 - this.height/2) + 'px';
\t \t \t \t this.applyBorderRadius('TopLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('TopRight', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomRight', true); // Border rond of niet
if (this.isOpen()) {
this.frame.style.height = (this.height - 2) + 'px';
this.iframe.style.top = (0 - this.height) + 'px';
} else {
if (this.position.vertical == 'left') {
this.frame.style.width = this.width + 'px';
} else {
this.frame.style.width = '0px';
}
}
break;
case 'bottom': this.container.style.bottom = '13%';
this.frame.style.position = 'static';
this.frame.style.top = '0px';
\t \t \t \t this.applyBorderRadius('TopLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('TopRight', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomRight', true); // Border rond of niet
if (!this.isOpen()) {
this.frame.style.height = this.title.offsetHeight + 'px';
}
break;
}
}
iQueueChat.prototype.positionRotate = function() {
switch (this.position.horizontal) {
case 'bottom': this.container.style.bottom = '13%'; // margin - bottom
\t \t \t \t this.container.style.boxShadow = "1px 4px 20px 0px ";
this.frame.style.position = 'static';
this.frame.style.top = '0px';
\t \t \t \t this.applyBorderRadius('TopLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('TopRight', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomLeft', true); // Border rond of niet
\t \t \t \t this.applyBorderRadius('BottomRight', true); // Border rond of niet
this.container.style.height = (this.height + this.title.offsetHeight) + 'px';
this.frame.style.height = (this.height + this.title.offsetHeight) + 'px';
if (!this.isOpen()) {
this.container.style.height = this.title.offsetHeight + 'px';
this.frame.style.height = this.title.offsetHeight + 'px';
this.frame.style.top = '0px';
\t \t \t \t this.applyBorderRadius('TopLeft', true); // Border rond of niet
\t \t \t \t \t this.applyBorderRadius('TopRight', true); // Border rond of niet
\t \t \t \t \t this.applyBorderRadius('BottomLeft', true); // Border rond of niet
\t \t \t \t \t this.applyBorderRadius('BottomRight', true); // Border rond of niet
}
break;
}
switch (this.position.vertical) {
case 'left':
this.container.style.right = '3%';
\t \t \t \t if (!this.isOpen()) {
\t \t \t \t \t this.container.style.right = '3%';
\t \t \t \t }
case 'right':
this.container.style.right = '3%';
\t \t \t \t if (!this.isOpen()) {
\t \t \t \t \t this.container.style.right = '3%';
\t \t \t \t }
break;
}
}
////////////////////////////////////////////////////////////////////////
iQueueChat.prototype.isOpen = function() {
return this.iframe.style.display == 'block';
}
iQueueChat.prototype.open = function() {
if (isMobile.any) {
window.open(this.url + '&mobile=yes');
} else {
this.iframe.style.display = 'block';
\t this.container.style.display = 'block';
\t this.div.style.backgroundImage = 'url("'+ this.icon2 +'")';
this.div.style.backgroundSize = '20px 20px';
this.div.style.backgroundRepeat = 'no-repeat';
this.div.style.backgroundPosition = 'center center';
this.applyPosition();
}
}
iQueueChat.prototype.close = function() {
this.iframe.style.display = 'none';
this.container.style.display = 'none';
this.div.style.backgroundImage = 'url("'+ this.icon1 +'")';
this.div.style.backgroundSize = '35px 35px';
this.div.style.backgroundRepeat = 'no-repeat';
this.div.style.backgroundPosition = 'center center';
this.applyPosition();
}
///////////////////////////////////////////////////////////////////////
iQueueChat.prototype.toggle = function() {
if (this.isOpen()) {
this.close();
} else {
\t
this.open();
}
}
////////////////////////////////////////////////////////////////
function initializeiQueueChat() {
window.iQueueChat = new iQueueChat();
}
///////////////////////////////////////////////////////////////////
var EventHandler = {
bind: function(el, ev, fn){
if (window.addEventListener) {
el.addEventListener(ev, fn, false);
} else if(window.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
}
},
stopHere: function(event) {
var event = event ? event : window.event;
if (event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
if (event.cancelBubble!=null) event.cancelBubble = true;
}
}
///////////////////////////////////////////////////////////////////////////////
EventHandler.bind(window, 'load', initializeiQueueChat)
EventHandler.bind(document, 'page:load', initializeiQueueChat)
/////////////////////////////////////////////////////////////////////////
EventHandler.bind(window, 'message', function(event) {
window.iQueueChat.processMessage(JSON.parse(event.data));
});
////////////////////////////////////////////////////////////////////////////////
!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);任何人都可以做，當你點擊圓我的彈出褪色？
而不是僅顯示，我喜歡淡入彈出。
Pleasse幫幫我！
非常感謝！
請使用我的代碼片段並編輯它。
您也必須分享您的HTML代碼。 – snkv
HTML是在HTML Dom JS中生成的，所以這是我的html代碼 –