javascript - Do something when modal is closed (Bootstrap) - Stack Overflow

admin管理员组

文章数量:1353191

I don't know very much about Javascript, but I've been learning a lot the past few days.

I cannot, for the life of me, figure this one out.

I'm using the modal function in Bootstrap and I've got it working and everything. But now, I want something to happen (insert CSS) once they user closes the dialogue box.

I know how to do the insertion of CSS. How do I initiate it when data-dismiss is clicked?

Thank you.

EDIT: Did I do this correctly? It doesn't seem to work.

<script>
$(document).ready(function(){
$('.testing').click(function(event){
    $('.modal-body').empty();
    if($(event.target).is('#step2')) {
            $('.modal-body').append('<img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive" id="step100">');
    } else if ($(event.target).is('#step3')) { 
        $('.modal-body').append('<img src="//placehold.it/600x350" class="thumbnail img-responsive" id="step100">');
    } else { }

    $('#modal').modal('show');
    $('#modal').on('hide.bs.modal', function (e) {
            $("#wheel").css("-webkit-animation-play-state","running");
            $(".fa").css("-webkit-animation-play-state","running");
    })
});



});
</script>

Modal code:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

FOR FUTURE READERS: Turns out my code was just fine. The problem is that my edits weren't being reflected on the page. WordPress cache issue, I'm assuming.

I don't know very much about Javascript, but I've been learning a lot the past few days.

I cannot, for the life of me, figure this one out.

I'm using the modal function in Bootstrap and I've got it working and everything. But now, I want something to happen (insert CSS) once they user closes the dialogue box.

I know how to do the insertion of CSS. How do I initiate it when data-dismiss is clicked?

Thank you.

EDIT: Did I do this correctly? It doesn't seem to work.

<script>
$(document).ready(function(){
$('.testing').click(function(event){
    $('.modal-body').empty();
    if($(event.target).is('#step2')) {
            $('.modal-body').append('<img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive" id="step100">');
    } else if ($(event.target).is('#step3')) { 
        $('.modal-body').append('<img src="//placehold.it/600x350" class="thumbnail img-responsive" id="step100">');
    } else { }

    $('#modal').modal('show');
    $('#modal').on('hide.bs.modal', function (e) {
            $("#wheel").css("-webkit-animation-play-state","running");
            $(".fa").css("-webkit-animation-play-state","running");
    })
});



});
</script>

Modal code:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

FOR FUTURE READERS: Turns out my code was just fine. The problem is that my edits weren't being reflected on the page. WordPress cache issue, I'm assuming.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 6, 2014 at 16:51 Tara asked Aug 6, 2014 at 16:15 TaraTara 26111 gold badge55 silver badges1717 bronze badges 1

• This is already included in the Bootstrap documentation: getbootstrap./javascript/#modals. – Jason Commented Aug 6, 2014 at 16:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

See the hide.bs.modal event here: Bootstrap Modal Docs

$('#myModal').on('hide.bs.modal', function (e) {// do something...})

for the next bit, I think

$('#modal').modal({show:true});

should be

$('#modal').modal('show');

But maybe that's not where the problem is... what part isnt working?

本文标签： javascriptDo something when modal is closed (Bootstrap)Stack Overflow