Bootstrap $('# myModal'). Modal ('show') не работает

Ответ 1

Наиболее распространенной причиной таких проблем является

1.Если вы определили библиотеку jquery более одного раза.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Библиотека начальной загрузки применяется к первой библиотеке jquery, но при перезагрузке библиотеки jquery исходная загрузка начальной загрузки теряется (модальная функция находится в начальной загрузке).

2.Пожалуйста, оберните свой код JavaScript внутри

$(document).ready(function(){});

3. Проверьте, идентичен ли идентификатор модальности

как тот, который вы определили для компонента (также проверьте дублирование того же идентификатора).

Ответ 2

У меня такая же проблема при работе с модульным всплывающим бутстрапом, я использовал Id и триггерное событие click для показа и выделения модальных всплывающих окон вместо $( "# Id" ). modal ('show') и $( "# id" ).modal( 'скрыть'), `

    <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
    $('#btnPurchaseClose').trigger('click');// for close popup

     $('#btnOpenPurchase').trigger('click');`// for open popup

Ответ 3

Это может произойти по нескольким причинам:

1. Вы забыли включить библиотеку Jquery в документ
2. Вы включили библиотеку Jquery в документ более одного раза
3. Вы забыли включить в документ библиотеку bootstrap.js
4. Версии вашего Javascript и Bootstrap не совпадают. Обратитесь к документации по начальной загрузке, чтобы убедиться, что версии совпадают
5. В модальном <div> отсутствует modal класс
6. Идентификатор модального <div> неверен. (например: вы неправильно добавили # в id <div>)
7. # селекторе Jquery отсутствует знак #

Ответ 4

Моя основная причина заключалась в том, что я забыл добавить # перед именем id. Хромой, но правда.

Из

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

Для

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

Для вашей справки последовательность кода, которая работает для меня, это

<script>
function scheduleRequest() {
        $('#scheduleModal').modal('show');
    }
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">  
</script>
<script
    src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>

Ответ 5

Используйте .modal({show:true}) и .modal({show:false}) вместо ('show') и ('hide')... кажется, что это зависит от версии начальной загрузки/версии jquery. Надеюсь, поможет.

Ответ 6

Попробуйте это без параметра

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

он должен работать

Ответ 7

используйте объект для вызова...

<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>

или если вы используете ajax, чтобы показать, что модальный после получения результата, это работа для меня...

$.ajax({ url: "YourUrl",
type: "POST", data: "x=1&y=2&z=3",
cache: false, success: function(result){
        // Your Function here
        $("#myModal").modal("show");
    }
});

Ответ 8

Вы уверены, что id модального "myModal"? если нет, то вызов не вызывает его.

также - только после чтения сообщения - вы вызываете функцию/проверку с помощью этой кнопки

<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

а затем, если все хорошо - вы хотите вызвать модальный. - если это hte case - тогда вы должны удалить переключатель из этой кнопки. Предполагаю, что к этому клику привязан обработчик событий? вам понадобится .modal( "show" ) как часть этой функции. не переключается с этой кнопки. также - этот id правильный "creatNewAcount" в отличие от этого написания "createNewAccount"

<button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button>

Ответ 9

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

первый googleapis script не работает, теперь дни используют этот второй скрипт, указанный jquery

Ответ 10

Сначала загружается jQuery lib. В моем случае я сначала загружал загрузочную библиотеку, также тестировал тег с целью и запускал триггер щелчка. Но главная проблема заключалась в том, что сначала загружается jquery.

Ответ 11

ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, Помогите Я посмотрел на все ответы, и я пытаюсь заставить это работать, но я не получаю никаких результатов.

мой модальный, который находится в нижней части моего зрения (.cshtml)

<div class="modal fade" id="DeleteModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a href="#" class="close" data-dismiss="modal">&times;</a>
            <h3 class="modal-title">Manage Profile Image Delete</h3>
        </div>
        <div class="modal-body">
            hello world
            <h3>Are You Sure? You Want To Delete This Image</h3>
            <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
            <a href="#" class="btn btn-success" data-dismiss="modal" onclick="DeleteImage()">Confirm</a>
        </div>
    </div>
</div>

кнопка, которая запускает показ, находится в пользовательском помощнике html, который похож на это (я знаю, что это вызывает функцию, потому что оповещение настроено, чтобы показать прогресс)

 TagBuilder trashTb = new TagBuilder("a");
            trashTb.Attributes["href"] = "#";
            trashTb.Attributes["onclick"] = "ConfirmDelete(" + img.Id + ")";

onclick="ConfirmDelete(15)"

во внешнем файле js вот метод show

var ConfirmDelete = function (imageId) {
alert(imageId);
$("#hiddenImageId").val(imageId);
$("#DeleteModal").modal("show");

}

оповещение работает, и как только я закрываю страницу оповещения, теряет фокус, но не модальный

вот мои сценарии в том порядке, в котором они отображаются в источнике

   <link href="/Content/Bootstrap-Lumin.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.8.3.js"></script>


<script src="/Scripts/jquery-3.3.1.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/JustAsk/Helpers.js"></script>

<script src="/scripts/jquery.validate.min.js"></script>

<script src="/scripts/jquery.validate.unobtrusive.min.js"></script>


<script src="/Scripts/jquery.validate.js"></script>

Ответ 12

<div class="modal fade" id="myModal" aria-hidden="true">
   ...
   ...
</div>

Примечание: удалите класс исчезновения из div и наслаждайтесь, это должно работать

Ответ 13

Пожалуйста,

попробуйте и проверьте, имеет ли кнопка запуска атрибут type = "button". Рабочий пример:

  <button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

   <script >
           function modal_btn_click() {

               $('#myModal').modal({ show: true });
           }
   </script>