Модальная ошибка JS - Объект не поддерживает свойство или метод 'модальный' - PullRequest
Новая
       31

Модальная ошибка JS - Объект не поддерживает свойство или метод 'модальный'

0 голосов
/ 20 октября 2018

Я пытаюсь отобразить модальное всплывающее окно, чтобы показать детали выбранной записи в сетке.После того, как я установил значения каждого элемента управления в модальном всплывающем окне, я пытаюсь открыть его, и это не удается.Я включил все необходимые ссылки в главную страницу сайта, но получаю сообщение об ошибке «Объект не поддерживает свойство или метод« модальный »»:

На главной странице: 

<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="cache-control" content="no-cache, no-store" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <title><%: Page.Title %></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>

Javascript: 

function setDetailFields(record, clear) {debugger
    // populate controls in modal
    var reqID = record["RequestID"];
    ...

    $('#spnRequestID').text(reqID);
    ...

    //$('#detailModal').modal({ backdrop: 'static', keyboard: false });
    $('#detailModal').modal('show');
}

.aspx: 

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in modal-lg ui-draggable">
        <div class="modal-content">    
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Something</h4>
            </div>
            <div class="modal-body"> 
                ...                  
            </div>
        </div>
    </div>
</div>
....

Ответы [ 3 ]

0 голосов
/ 20 октября 2018

Ваш код правильный

Возможная проблема:

  • Вам необходимо применить модальный HTML-код до конца Мастер ContentPlaceHolder Контент тела
  • Постарайтесь сохранитьэто HTML непосредственно перед окончанием </body> как можно ближе
  • Проверьте другие элементы z-index в css, возможно, он не перекрывает эту модель
  • Убедитесь, что он вызывает $('#detailModal').modal('show');, используйте панель инструментов разработчика и отладчик (вы уже применили debugger)

Проверьте приведенный ниже пример: 

$(document).ready(function () {
    $('#myBtn').click(function () {
        setDetailFields();
    })
});

function setDetailFields(record, clear) {
    // populate controls in modal
    //var reqID = record["RequestID"];
    //...

    //$('#spnRequestID').text(reqID);
    //...

    //$('#detailModal').modal({ backdrop: 'static', keyboard: false });
    $('#detailModal').modal('show');
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<button class='btnup' id="myBtn">Show Modal</button>

<div class="modal fade" id="detailModal" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in modal-lg ui-draggable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Something</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>
0 голосов
/ 20 октября 2018

Спасибо всем за ответ.Проблема заключалась в следующих двух ссылках на скрипт jquery на главной странице.Как только я удалил их, модал сработал. 

<body>
    <form id="MainForm" runat="server">
        <asp:ToolkitScriptManager ID="toolkitScriptMaster" runat="server" EnablePartialRendering="true" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="jquery.ui.combined" />
            </Scripts>
        </asp:ToolkitScriptManager>
0 голосов
/ 20 октября 2018

проверьте ваши ссылки;Я думаю, что они конфликтуют друг с другом.комментируйте и удаляйте комментарии, чтобы найти конфликт.надеюсь, это будет полезно

...