JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<head>
    <meta name="viewport" content="width=device-width,height=device-height,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="form">
    <p>Obscured field:-</p> 
    <input type="text" maxlength="255" />
</div>

<div id="dialog">
    <textarea rows="10" cols="80"></textarea>
</div>
</body>

CSS

#dialog { position:absolute; left: 0px; top: 0px; width:100%; height:100%; background-color: #c0c0c0;; z-index:10000; opacity: 0.7; }
#form input { border: 2px solid red; position: relative; top: 20px; left: 50px; }

JavaScript

var stop = function(e) { 
    e.preventDefault(); 
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
};
dialog.addEventListener("click", stop, true);
dialog.addEventListener("touchstart", stop, true);
dialog.addEventListener("touch", stop, true);