JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<select name="supername">
    <option value="0">выбирите действие</option>
    <option value="1">всплывающие окно с информацией 1</option>
    <option value="2">всплывающие окно с информацией 2</option>
    <option value="3">просто выбираем 3й пункт</option>
    <option value="4">всплывающие окно с информацией 3</option>
</select>
<div id="modal"></div>
<div id="bg"></div>

CSS

#modal {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    min-height: 50px;
    padding: 10px;
    text-align: center;
    border: 1px solid #900;
    background: #FFF;
    display: none;
    z-index: 20;
    
}
#modal span {
    font-weight: bold;
    color: #060;
}
#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 10;
}

JavaScript

var modal = $('#modal');
var bg = $('#bg');
$('select').change(function(){
    bg.fadeIn('fast');
    modal.html('<p>Val: <span>' + $(this).val() + '</span></p><p>Txt: <span>' + $('option:selected',this).text() + '</span></p>').fadeIn('fast');
});
bg.click(function(){
    $(this).add(modal).fadeOut();
});