2

I have been trying and failing to add a line break to a DRY bootstrap modal.

Here is my hyperlink template code that sends the message to the modal show code:

<a href="{% url achievement_details_delete achievement_detail.id %}" delete-confirm="Are you sure you want to DELETE the selected record? <br /><br />This action will permanently remove the record.">Delete</a>

Here is my jquery bootstrap modal code:

$(document).ready(function() {

    //START: Delete code.
    $('a[delete-confirm]').click(function(ev) {

        var href = $(this).attr('href');

        if (!$('#deleteConfirmModal').length) {

            $('body').append('<div id="deleteConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="deleteConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="deleteConfirmLabel">{% trans "Delete" %} - {{ resume_details_trans }}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-red" id="deleteConfirmOK" onclick="showProgressAnimation();">{% trans "Delete" %}</a></div></div>');

        }

        $('#deleteConfirmModal').find('.modal-body').text($(this).attr('delete-confirm'));

        $('#deleteConfirmOK').attr('href', href);

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

        return false;

    });
    //FINISH: Delete code.
});

1 Answer 1

7

Add this to the button to delete the record:

<a href="url"
   delete-confirm="Your Message Here!!<br /><br /><span class='confirm_delete_warning_red_bold'>You can even add in css to highlight specific text - Are you sure?</span>"
>
    Delete
</a>

And in your jquery code change the .text to .html. Text will render the text and .html will act as html and display the line breaks and css in the span tag.

 $('#deleteConfirmModal').find('.modal-body').html($(this).attr('delete-confirm'));

This will work for your code. Just watch your use of ' and " (single & double talking marks). Don't mix them up.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.