Показать модал после нажатия на кнопку с ядром asp.net MVC - PullRequest
Новая
       15

Показать модал после нажатия на кнопку с ядром asp.net MVC

0 голосов
/ 03 декабря 2018

Я пытаюсь реализовать модал semantic-ui с asp.net-core 2.0 MVC, который должен отображаться после нажатия кнопки, но после попытки поиска в течение 5 часов у меня нет решения.Как я могу определить обработку событий для этой ситуации (она также не работает с контроллерами).

JavaScript 

<script>
        function toggle_modula(id) {
            document.getElementById(id).innerHTML = '<div class="ui container"><div class ="ui modal"><div class="header">Hi There!</div></div></div><div class ="Content">hello World</div>';
            run();
        }
</script>
        
<script>function run() {
            $('.ui.modal').modal('toggle');
}</script>
<script src="https://semantic-ui.com/dist/semantic.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<button id="editButton" onclick="toggle_modula('insertcodehere');">Click Me</button>


<div id="insertcodehere"></div>

Ссылка: семантическая-пользовательская информация

Большое спасибо и извините за беспокойство!

1 Ответ

0 голосов
/ 04 декабря 2018

Если я создаю html-страницу со следующим кодом, она отображает кнопку «Нажми меня».

После нажатия на кнопку, она отображает «Привет, мир» под кнопкой, и модальное появляется с «Всем привет!".Это ожидаемое поведение?

Единственные изменения:

  1. удалены лишние теги сценария

  2. перемещен тег сценария jquery над семантическим сценарием 

    <doctype html>
<head>
<!--NOTE!!!! Jquery script imported ABOVE semantic-ui to ensure it is available-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<script src="https://semantic-ui.com/dist/semantic.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/></script>
<script>
    function toggle_modula(id) {
        document.getElementById(id).innerHTML = '<div class="ui container"><div class ="ui modal"><div class="header">Hi There!</div></div></div><div class ="Content">hello World</div>';
        run();
    }
    function run() {
        $('.ui.modal').modal('toggle');
}
</script>
</head>
<body>
<button id="editButton" onclick="toggle_modula('insertcodehere');">Click Me</button>
<div id="insertcodehere"></div>
</body>

Я считаю, что порядок сценариев является ключевым моментом здесь.Надеюсь это поможет!Отредактировано для добавления: Для проверки вставьте код в текстовый файл, сохраните как index.html и запустите в своем браузере.Изоляция от вашего другого кода может помочь подтвердить, что работает, а что нет.

...