Sweet Alert внутри Bootstrap Modal

У меня есть функция javascript для вызова сладкого оповещения на основе пользовательского ввода, но сладкое оповещение не работает внутри модели начальной загрузки.

Может кто-нибудь мне помочь

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

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

javascript twitter-bootstrap sweetalert
person JavaLearner1    schedule 03.12.2015    source источник
comment
alert = function() { если вы хотите вызвать if из html jsfiddle.net/link2twenty/oj5cfp6j   -  person Andrew Bone    schedule 03.12.2015
comment
@AndrewBone, вы должны опубликовать это как ответ.   -  person Shehary    schedule 03.12.2015

Ответы (2)


arrow_upward
2
arrow_downward

просто нужно немного изменить порядок вашей функции

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>

person Andrew Bone    schedule 03.12.2015

arrow_upward
1
arrow_downward

Я не большой поклонник JavaScript, поэтому не могу понять, почему он не работает с blur(), но вы можете сделать это с помощью функции jQuery keyup

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

person Shehary    schedule 03.12.2015
comment
запустили ли вы приведенный выше фрагмент, ввели ли вы значение 1 для проверки и включили ли вы все файлы, такие как включенные в ответ, CSS и JS, посмотрите, чего не хватает в вашем коде, потому что он работает во фрагменте, если вы введете 1 во вводе - person Shehary; 03.12.2015
comment
Это проверяет только когда вы печатаете, OP хочет, чтобы он был в фокусе - person Andrew Bone; 03.12.2015
comment
@AndrewBone аааа, OP может использовать функцию change или keydown, мое мнение, что user experience всегда на первом месте, так что лучше так, если вы мгновенно уведомляете пользователя о том, что что-то не так, а не предупреждаете, когда пользователь щелкает или делает что-то еще за пределами ввода - person Shehary; 03.12.2015
comment
@Shehary, таким образом, они получают уведомление между каждым нажатием клавиши (на самом деле, просто если они нажимают пробел) - person Andrew Bone; 03.12.2015
comment
@AndrewBone нет, они получают уведомление только при выполнении определенного условия, которое в данном случае < 2, и они не теряют фокус на вводе, когда оповещение закрывается, что, я думаю, лучше user experience, а не набираете › щелкнуть снаружи › показать оповещение › закрыть оповещение › нажать введите еще раз, чтобы ввести - person Shehary; 03.12.2015