メインWebページのテキストボックスでモーダルポップアップの内部を変更するには

Question

モーダルポップアップで何かしたいですが、モーダルポップアップとそのコードに関する知識はあまりありません。

私はメインWebページにあるテキストボックスでモーダルポップアップの内部を変更したいと思います。私はテキストボックスに何かを書くでしょう、そして、私がボタンをクリックすると、モーダルポップアップの内部が変更されるべきです。また、モーダルポップアップの内部にテキストボックスがあり、ボタンを押してテキストボックスに何かを書き込むと、メインWebページの段落も変更する必要があります。

HTML

<h2>Modal Example</h2> 

<!-- Trigger/Open The Modal --> 
<input type="text" id="to" value="Something"> 
<br> 
<button id="myBtn" onclick="myFunction()">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 

     <br> 
     <span class="close">&times;</span> 
     <p id="demo">.</p> 
    </div> 

</div> 

CSS

/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 100px; /* Location of the box */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

/* The Close Button */ 
.close { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 

JS

：

私はこのような何かを試してみました

Answer 1

このような実装が必要ですか。
例を実行して実際の動作を確認してください。ここ

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
//Modal open function 
 
function openModal() { 
 
    modal.style.display = "block"; 
 
    document.getElementById('demo').innerHTML = document.getElementById('to').value; 
 
} 
 

 
//Modal text update function 
 
function udpateText() { 
 
    modal.style.display = "none"; 
 
    document.getElementById('paragraph').innerHTML = document.getElementById('from').value; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    padding-top: 100px; 
 
    /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 

 
/* Modal Content */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 

 

 
/* The Close Button */ 
 

 
.close { 
 
    color: #aaaaaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<h2>Modal Example</h2> 
 

 
<p id="paragraph"></p> 
 
<!-- Trigger/Open The Modal --> 
 
<input type="text" id="to" value="Something"> 
 
<br> 
 
<button id="myBtn" onclick="openModal()">Open Modal</button> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 

 
    <br> 
 
    <span class="close">&times;</span> 
 
    <p id="demo">.</p> 
 

 
    <input type="text" id="from" value=""> 
 
    <br> 
 
    <button id="myModalBtn" onclick="udpateText()">Update Text</button> 
 

 
    </div> 
 

 
</div>