html5网页消息提示框代码,web组件代码示例：弹框提示信息组件

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Create a class for the element

class PopUpInfo extends HTMLElement {

constructor() {

// Always call super first in constructor

super();

// Create a shadow root

const shadow = this.attachShadow({mode: 'open'});

// Create spans

const wrapper = document.createElement('span');

wrapper.setAttribute('class', 'wrapper');

const icon = document.createElement('span');

icon.setAttribute('class', 'icon');

icon.setAttribute('tabindex', 0);

const info = document.createElement('span');

info.setAttribute('class', 'info');

// Take attribute content and put it inside the info span

const text = this.getAttribute('data-text');

info.textContent = text;

// Insert icon

let imgUrl;

if(this.hasAttribute('img')) {

imgUrl = this.getAttribute('img');

} else {

imgUrl = '/uploads/1910/alt.png';

}

const img = document.createElement('img');

img.src = imgUrl;

icon.appendChild(img);

// Create some CSS to apply to the shadow dom

const style = document.createElement('style');

console.log(style.isConnected);

style.textContent = `

.wrapper {

position: relative;

}

.info {

font-size: 0.8rem;

width: 200px;

display: inline-block;

border: 1px solid black;

padding: 10px;

background: white;

border-radius: 10px;

opacity: 0;

transition: 0.6s all;

position: absolute;

bottom: 20px;

left: 10px;

z-index: 3;

}

img {

width: 1.2rem;

}

.icon:hover + .info, .icon:focus + .info {

opacity: 1;

}

`;

// Attach the created elements to the shadow dom

shadow.appendChild(style);

console.log(style.isConnected);

shadow.appendChild(wrapper);

wrapper.appendChild(icon);

wrapper.appendChild(info);

}

}

// Define the new element

customElements.define('popup-info', PopUpInfo);