ユーザから入力1または2を取得し、入力ボタンモデルをクリックすると、入力に基づいて変更する必要があります

Question

入力ボックスから入力値を取得するためのスクリプトを使用し、model1sとmodel2sという2つの異なるモデルがあり、モデルをポップアップする必要があることに基づいて、2を入力します。

<script> 
    function myFunction() {  
    var input = document.getElementById('input').value; 
    var abcd= document.getElementById('abcd'); 
    abcd.data-target = "model" + input + "s";   
    } 
</script> 

<div class="col-lg-3"> 
    <input type="text" placeholder="123" id="input" required> 
    <button type="submit" onclick="myFunction();" class="btn btn-info" id="abcd">ENTER</button> 
</div> 

<div id="model1s" class="modal fade" role="dialog"> 
    <div class="modal-dialog">  
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div>  
    </div> 
</div>  

<div id="model2s" class="modal fade" role="dialog"> 
    <div class="modal-dialog">  
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div>  
    </div> 
</div> 

Answer 1

また、あなたがリンク

How can I trigger a Bootstrap modal programmatically?

Answer 2

このフィドルをご覧ください

function myFunction() { 
 

 
    var input = document.getElementById('input').value; 
 
    var abcd = document.getElementById('abcd'); 
 
    document.querySelectorAll('.modal').forEach(function(a){ 
 
    a.style.display='none'; 
 
    }) 
 
    document.getElementById("model" + input + "s").style.display='block'; 
 

 

 
}

.modal{ 
 
display:none; 
 
}

<div class="col-lg-3"> 
 
    <input type="text" placeholder="123" id="input" required> 
 
    <button type="submit" onclick="myFunction();" class="btn btn-info" id="abcd">ENTER</button> 
 
</div> 
 

 

 

 
<div id="model1s" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal 1Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 

 
<div id="model2s" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal2 Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 3

を示すために、与えられた入力値にmodalボックスに一致するすべてのmodalボックスを非表示1次回このquerySelectorAll()のように試してみてください、これが一般的ですこの質問に対する解決策。 http://jsfiddle.net/Rohith_KP/1aeur58f/225/

$(document).ready(function(e) { 
$('#mymodal').on('click',function(){ 
    var id = $('#input').val(); 
    $('#myModal'+id).modal('show'); 
}); 

}）。私はあなたのコードでは、あなたが

<script> 
function myFunction() { 

    var input = document.getElementById('input').value; 
    var abcd= document.getElementById('abcd'); 
    //abcd.data-target = "model" + input + "s"; 
    $("#model" + input + "s").modal('show'); 

} 
</script> 

を追加する必要があると思う