quoad
Version:
Serenity/JS: Next generation acceptance testing library for modern web applications.
27 lines (24 loc) • 1.04 kB
HTML
<!--
Using_shadow_DOM by Mozilla Contributors
contributors: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM/contributors.txt
source: MDN, https://mdn.github.io/web-components-examples/popup-info-box-web-component/index.html
license: https://creativecommons.org/licenses/by-sa/2.5/
-->
<html>
<head>
<meta charset="utf-8">
<title>Pop-up info box — web components</title>
<script src="/scripts/shadow-dom.js" defer></script>
</head>
<body>
<h1>Pop-up info widget - web components</h1>
<form>
<!-- <div class="overlay" style="position: fixed; top:0; left: 0; background-color: rgba(50, 100, 200, .5); width: 400px; height: 90px; z-index:100000">overlay</div>-->
<div>
<label for="cvc">Enter your CVC <popup-info img="/scripts/img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info></label>
<input type="text" id="cvc">
</div>
</form>
</body>
</html>