Question

我正在尝试使用模型创建一个对话框。但我没有得到输出。这是我的代码

标头文件

<head id="Head1" runat="server">
    <title></title>
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/jquery-ui.js"></script>
    <%--<script src="js/jquery-ui.min.js"></script>--%>
    <script src="js/Report-Filter.js"></script>
    <script src="js/ReportTotalSalesPivot.js"></script>

    <script src="js/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/jquery-ui.min.css" rel="stylesheet" />

    <link href="css/Accordian-Hide-Show.css" rel="stylesheet" />
    <script src="js/Accordian-Hide-Show.js"></script>

    <link href="css/ReportTotalSalesPivot-style.css" rel="stylesheet" />

</head>

体内

<input id="btnSave opener" class="btn btn-info" type="button" value="SAVE" />
<div id="wrapper">
    <p>Some txt goes here</p>
</div>

Jquery代码

$(document).ready(function () {
    $('#wrapper').dialog({
        autoOpen: false,
        title: 'Basic Dialog'
    });
    $('#opener').click(function () {
        $('#wrapper').dialog('open');
        return false;
    });
});

请不要建议fiddle。从这里只有我得到了代码。我认为在head标签中安排链接的问题。

我收到了错误消息。我认为该错误与此模型无关。

错误消息

jquery-3.1.1.js：6170获取http://localhost:55047/css/images/ui-icons_444444_256x240.png 404（未找到）

Answer 1

将按钮id更改为不带空格的按钮。你不能在id中使用空格。看起来您使用它的方式与class相同，您可以在其中添加多个值。

<input id="btnSave" class="btn btn-info" type="button" value="SAVE" />

如果你修改了jQuery监听器，那么modal就会打开。

$('#btnSave').click(function () {
    $('#wrapper').dialog('open');
});

您缺少的那些图片可能是downloaded here。它们包含在UI下载中。

Answer 2

您需要按如下方式排列标题标记。以下是工作代码。头文件序列很重要。

<html>
<head>
    <title>Bootstrap Modal PopUp</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />

    <script>
        $(document).ready(function () {
            $("#showmodal").click(function () {
                $('#myModal').modal('show');
            });
        });
    </script>
</head>
<body>
    <button id="showmodal" class="btn btn-info btn-lg" type="button">Open Modal</button>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    This is the test modal pop-up.
                </div>
                <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
            </div>
        </div>
    </div>
</body>
</html>

如何使用Jquery在ASP.Net中创建对话框？

2 个答案: