Адаптировать загрузочный модал к тексту

#html #bootstrap-modal

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

Вопрос:

У меня есть загрузочный модал:

 <div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Documento</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">amp;times;</span>
      </button>
      </div>
      <div class="modal-body" style="color:black;" id="MSJ">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    </div>
  </div>
  

Модал показывает сообщение, которое не всегда совпадает. И я показываю это на экране, используя JQUERY, вот так:

 $("#MSJ").html(Respuesta);
$("#ModalMSJ").modal("show");
  

и я хочу, чтобы он адаптировался к тексту сообщения.

вот как это выглядит в настоящее время, когда отображается одно из сообщений:

Ошибка

Как я могу адаптировать модал к тексту сообщения?

Ответ №1:

Мне просто нужно было добавить style=" width: auto; height:auto !important;" в div class="modal-dialog"

 <div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style=" width: auto; height:auto !important;" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Documento</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">amp;times;</span>
      </button>
      </div>
      <div class="modal-body" style="color:black;" id="MSJ">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    </div>
  </div>