<link rel="stylesheet" href="./popup.css" type="text/css" media="screen" />

<script type="text/javascript" src="./popup.js"></script>

<!-- popup background -->
<div class='modal-background'></div>

<!-- popup 1 -->
<div id="my-modal1" class="modal-dialog">
     <div class="modal-title">
          <div class="modal-title-name"><b>My Calculator</b></div>
          <div class="modal-title-close"><button type="button" onclick="CloseDialog(this);">x</button></div>
     </div>
     <div class="modal-content">
          <div>
               <input type='text' value='' size='5'>
               +
               <input type='text' value='' size='5'>
               =
               <font>?</font>
          </div>
          <div style='margin-top:20px'>
               <center><input type='submit' value='Calculate' style='width:100px'></center>
          </div>
     </div>
</div>

<!-- popup 2 -->
<div id="my-modal2" class="modal-dialog">
     <div class="modal-title">
          <div class="modal-title-name"><b>My Notepad</b></div>
          <div class="modal-title-close"><button type="button" onclick="CloseDialog(this);">x</button></div>
     </div>
     <div class="modal-content">
          <div>
               <textarea type='text' value='' rows=18 cols='42'></textarea>
          </div>
          <div style='margin-top:20px'>
               <center><input type='submit' value='Save' style='width:100px'></center>
          </div>
     </div>
</div>

<button onclick='OpenDialog("my-modal1");'>Show Calculator</button>

<button onclick='OpenDialog("my-modal2");'>Show Notepad</button>

function OpenDialog(dialogId)
{
     document.getElementById(dialogId).style.display = "flex"; // show

     document.querySelector('.modal-background').style.display = "block"; // show
}

function CloseDialog(elem)
{
     elem.closest('.modal-dialog').style.display = "none"; // hide
     document.querySelector('.modal-background').style.display = "none"; // hide
}

.modal-dialog {
     display:none;
     position: absolute;
     width: auto;
     pointer-events: none;
     z-index: 2;
     width1: fit-content;
     justify-content:start;
     background-color: #fff;
     flex-direction: column;
     position:fixed;
     left: 50%;
     transform: translateX(-50%);
}

.modal-title {
     display: flex;
     pointer-events: auto;
     flex-direction: row;
     border-bottom: 1px solid rgba(0,0,0,.2);
}

.modal-title-name {
     display:flex;
     justify-content:center;
     width:100%;
     background-color: lightgray;
     padding-left: 0px;
}

.modal-title-close {
     display:flex;
     justify-content:end;
}

.modal-content {
     margin:30px;
     pointer-events: auto;
     background-color: #fff;
     background-clip: padding-box;
}

.modal-background
{
     position:fixed;
     padding:0;
     margin:0;
     top:0;
     left:0;
     width:100%;
     height:100%;
     opacity:0.8;
     background-color:gray;
     z-index:1;
     display:none;
}