Question

我使用Bootstrap处理MVC 5。我的项目有一个模态，它是开放点击链接，贝娄是我的模态语法，我的问题是我的页脚操作按钮不起作用。在保存按钮点击事件我想警告。

目标链接：

标题

<a href="#" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#basicModal">Click to open Modal</a>

莫代尔：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

模态脚本：

@section Scripts {
    <script>
        $(function () {
            $('btnSave').on('click', function (event) {
                alert();
                event.preventDefault();
            });

        });

    </script>
}

Answer 1

你走在正确的轨道上，但没有$db['default']['hostname'] = 'http://www.example.com';，它会尝试寻找标签名为btnSave的元素。您需要更新选择器，以便选择ID为btnSave的元素：


$route['(:any)'] = 'my_controller/$1';
$route['default_controller'] = "my_controller";
$route['404_override'] = '';

Answer 2

我建议您在Layout.cshtml页面的Script Section中放置btnSave Jquery click事件。此点击事件必须放在@Render正文之后，或者最好将它放在正文标记结尾

之前

您可以将以下代码放在Layout.cshtml中，如下所示 -

- @RenderBody之后

-1-首次加载Jquery

-2-然后加载Bootstrap.min.js

-3-然后放置Bootstrap Model Html Code

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <h3>Modal Body</h3>
        </div>
        <div class="modal-footer">
            <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
    </div>
</div>

-4-然后将代码放在

之下

 <script>
    $(function () {
        $('#btnSave').on('click', function (event) {
            alert();
            event.preventDefault();
        });

    });

</script>

-5-然后转到您的视图您要放置的位置按钮将显示弹出窗口并将代码放在下面

<a href="#" class="btn btn-lg btn-success"
   data-toggle="modal"
   data-target="#basicModal">Click to open Modal</a>

Answer 3

当然可以简单地使用onclick来触发保存：

<button type="button" class="btn btn-primary" onclick="someAction();">Save changes</button>

Bootstrap MODAL操作按钮不起作用

标题

3 个答案: