使用脚本从输入框中获取输入值,有两个不同的模型分别名为model1s和model2s,用户应根据弹出的模型给出1或2,同时单击enter按钮。

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

最佳答案

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

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

关于javascript - 通过从用户获取输入1或2并单击Enter按钮,应该根据输入更改模型,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43633020/

10-12 03:31
查看更多