twitter-bootstrap Bootstrap Modal 中的 Sweet Alert

Sweet Alert inside Bootstrap Modal

提问by JavaLearner1

I have a javascript function to call sweetalert based on the userinput but sweet alert is not working inside bootstrap model.

我有一个 javascript 函数可以根据用户输入调用 sweetalert，但是 Sweet alert 在引导程序模型中不起作用。

can anyone help me out

谁能帮我吗

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>   

<!-- Modal -->
<div class="modal fade" id="myModal" 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">
      <input type="text" id="input1" onblur="alerts()">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>
 </div>

JavaScript:

JavaScript：

function alerts()
{
  var inputs = document.getElementById("input1").value;
  if(inputs < 2)
  {
  swal('Not Valid', 'Enter another','warning');
  }
}

采纳答案by Andrew Bone

just needed to reorder your function slightly

只需要稍微重新排序您的功能

http://jsfiddle.net/link2twenty/oj5cfp6j/

http://jsfiddle.net/link2twenty/oj5cfp6j/

alerts = function () {
  var inputs = document.getElementById("input1").value;
  if (inputs < 2) {
    swal('Not Valid', 'Enter another', 'warning');
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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">
    <input type="text" id="input1" onblur="alerts()">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
  </div>
</div>

回答by Shehary

I'm not big fan of JavaScript so can't sure why it's not working with blur(), but you can do it with jQuery keyupfunction

我不是 JavaScript 的忠实粉丝，所以不知道为什么它不能使用blur()，但你可以使用 jQuerykeyup函数来做到这一点

$(document).ready(function () {
  $('#input1').keyup(function () {
    var inputs = $(this).val();
    if (inputs < 2) {
      swal('Not Valid', 'Enter another', 'warning');
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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">
        <input type="text" id="input1" class="form-control">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>