Блог

Главная - Вопросы по программированию - Модальный загрузчик добавляет анимацию

Модальный загрузчик добавляет анимацию

#javascript #twitter-bootstrap #bootstrap-modal

#javascript #twitter-bootstrap #bootstrap-модальный

Вопрос:

Я использую стандартный модальный загрузчик, я хочу добавить действие, когда я нажимаю на фон, мой модал должен выполнять это действие встряхивания. Как мне это сделать? Помогите мне, пожалуйста. Я использую <script src="/Content/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script> 

 <div id="static" class="panel panel panel-info modal fade" tabindex="-1" role="dialog" data-backdrop="static" style="display: none;">
<div class="panel-heading">
    info
</div>
<div class="panel-body">
    <div class="modal-body">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">

            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">                         
                <asp:TextBox runat="server" ID="testе" ></asp:TextBox>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="col-xs-4 col-sm-4 col-md-4 text-left">
        <button type="button" data-dismiss="modal" class="btn btn-link">close</button>
    </div>
    <div class="col-xs-8 col-sm-8 col-md-8 text-right">
        <asp:Button ID="btnDownload" runat="server"  OnClick="btnDownload_Click" class="btn btn-success" Text="downl"></asp:Button>

    </div>
</div>

Комментарии:

1. У вас есть URL-адрес plunker того, что вы пробовали?

2. @fassetar извините, но я не понимаю вашего вопроса?

3. Нам нужно будет увидеть некоторый код, который поможет вам. Можете ли вы создать plunkr, демонстрирующий ваш код, или вы можете просто опубликовать, где вы пытались применить класс к модальному?

4. @DaveV Я использую модальный из getbootstrap.com/javascript

5. Нам нужно увидеть пример вашего кода и то, как вы применили класс

Ответ №1:

Используя animate.css, это довольно просто. Просто используйте модальные события начальной загрузки, чтобы проверить цель события и добавить shake класс к .modal-dialog элементу. Прослушивание animationend вы можете удалить shake класс после завершения анимации.

Вот пример. 

 var $modal = $('#modal-demo'),
    $btn = $('#open-modal-btn');

$modal.modal({
  keyboard: false,
  backdrop: 'static',
  show: false
})

$btn.on('click', function() {
  $modal.modal('show');
})

$modal.on('shown.bs.modal', function () {
  $(this).on('click', function(e) {
    if(e.target.id === 'modal-demo') {
      var $dialog = $(this).find('.modal-dialog');
      $dialog.addClass('shake');
      $dialog.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
        $dialog.removeClass('shake');
      });      
    }
  })
})

$modal.on('hidden.bs.modal', function () {
  $(this).off('click');
})  
 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/animatecss/3.5.2/animate.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.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" id="open-modal-btn">
  Launch demo modal
</button>

<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog animated" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">amp;times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine bodyamp;hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->