javascript - Set Bootstrap Modal text dynamically? - Stack Overflow

admin管理员组

文章数量:1426617

I'm trying to set the modal text after it's been launched by a jQuery click event, but I'm unsuccesful. Can somebody give me some pointers?

I have tried setting the title, body and button dynamically, but for some reason it's not added.

$(function() {
    $(".contact-input-plus").on( "click",  "a", function() {
        if ( ! $(this).is(".remove")) {
           // Do stuff
        } else {
            $('#confirm').modal('show');
            $('#confirm').on('show.bs.modal', function() {
                var modal = $(this);
                modal.find('.modal-body p').text('You are about to remove this entry. Are you sure?');
                modal.find('.modal-header h4').html('Remove entry');
                modal.find('.modal-footer a.btn').text('Remove');
            });

        }
        return false;
    });
});

Note: I need to clarify something. The modal is displayed firstly without the text set. When I cancel and fire the modal again, the text is inserted.

I'm trying to set the modal text after it's been launched by a jQuery click event, but I'm unsuccesful. Can somebody give me some pointers?

I have tried setting the title, body and button dynamically, but for some reason it's not added.

$(function() {
    $(".contact-input-plus").on( "click",  "a", function() {
        if ( ! $(this).is(".remove")) {
           // Do stuff
        } else {
            $('#confirm').modal('show');
            $('#confirm').on('show.bs.modal', function() {
                var modal = $(this);
                modal.find('.modal-body p').text('You are about to remove this entry. Are you sure?');
                modal.find('.modal-header h4').html('Remove entry');
                modal.find('.modal-footer a.btn').text('Remove');
            });

        }
        return false;
    });
});

Note: I need to clarify something. The modal is displayed firstly without the text set. When I cancel and fire the modal again, the text is inserted.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Sep 6, 2015 at 21:01 Taapo asked Sep 6, 2015 at 20:48 TaapoTaapo 1,99744 gold badges2020 silver badges3636 bronze badges 4

• Is $('#confirm').modal('show'); firing properly? Is ! $(this).is(".remove") evaluating the way you intend it to? – Tim Commented Sep 6, 2015 at 21:00
• Yes, it's firing properly. But the text values are not added to the modal the first time - only from the second time on ... – Taapo Commented Sep 6, 2015 at 21:02
• So opening the modal on the first attempt the text is not added, but on subsequent attempts it is? – Tim Commented Sep 6, 2015 at 21:03
• Exactly like you describe it, indeed. – Taapo Commented Sep 6, 2015 at 21:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try setting the dynamic stuff before calling the .show() like this:

$(function() {
    $(".contact-input-plus").on( "click",  "a", function() {
        if ( ! $(this).is(".remove")) {
           // Do stuff
        } else {
                var modal = $('#confirm');
                modal.find('.modal-body p').text('You are about to remove this entry. Are you sure?');
                modal.find('.modal-header h4').html('Remove entry');
                modal.find('.modal-footer a.btn').text('Remove');

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

        }
        return false;
    });
});

本文标签： javascriptSet Bootstrap Modal text dynamicallyStack Overflow