Question

我正在尝试使用asp.net-core 2.0 MVC实现语义UI模态，单击按钮后应该显示该模态，但是尝试搜索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>

参考：semantic-ui information

非常感谢您，打扰了！

Answer 1

如果我使用以下代码创建html页面，则会显示一个“点击我”按钮。

单击按钮后，它将在按钮下方显示“ hello World”，并弹出模式“ Hi there！”。这是预期的行为吗？

唯一的变化是：

删除了多余的脚本标签

将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并在浏览器中运行。与您的其他代码隔离可能有助于确认哪些有效，哪些无效。

单击带有asp.net core MVC的按钮后显示模式

1 个答案: