Question

使用脚本从输入框中获取输入值，并且有两个名为model1s和model2s的不同模型，用户应根据模型应弹出的方式给出1或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

请看这个小提琴，这是这个问题的一般解决方案。 http://jsfiddle.net/Rohith_KP/1aeur58f/225/

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

}）;

Answer 2

尝试这样querySelectorAll()。首先隐藏所有modal框，然后匹配给定的输入值modal框以显示

＆＃13;

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';


}

＆＃13;

.modal{
display:none;
}

＆＃13;

<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>

＆＃13;

Answer 3

我认为在您的代码中，您需要添加

<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>

另外，您需要查看以下链接

How can I trigger a Bootstrap modal programmatically?

通过从用户获取输入1或2并单击输入按钮模型，应根据输入进行更改

3 个答案: