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

Question

I am trying make a dialog box using model. 我正在尝试使用模型创建一个对话框。 But I am not getting an output. 但是我没有得到输出。 Here is my code 这是我的代码

Header Files 头文件

<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>

Inside Body 内部身体

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

Jquery code jQuery代码

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

Please don't suggest this fiddle . 请不要建议这个小提琴。 From here only i got the code. 从这里我只有代码。 I think the problem with arranging links in head tag. 我认为在head标签中安排链接的问题。

I got error message. 我收到错误消息。 I think that error is not related to this model. 我认为该错误与该模型无关。

Error msg 错误味精

jquery-3.1.1.js:6170 GET http://localhost:55047/css/images/ui-icons_444444_256x240.png 404 (Not Found) jquery-3.1.1.js：6170 GET http：// localhost：55047 / css / images / ui-icons_444444_256x240.png 404（未找到）

Answer 1

Change the button id to one without spaces. 将按钮id更改为一个无空格的按钮。 You cannot use a space inside an id. 您不能在ID内使用空格。 It looks like you are using it in the same way as class , where you can add multiple values. 看起来您正在以与class相同的方式使用它，您可以在其中添加多个值。

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

Then the modal will open if you modify the jQuery listener. 然后，如果您修改jQuery侦听器，则模式将打开。

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

And those images you are missing can be downloaded here . 那些您丢失的图像可以在这里下载。 They are included in the UI download. 它们包含在UI下载中。

Answer 2

You need to arrange the Header Tag like below. 您需要按以下方式排列标题标签。 Below are working code. 以下是工作代码。 Header file sequence is important. 头文件序列很重要。

<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 个解决方案

解决方案1
0 2017-02-09 12:16:25

解决方案2
0 2017-02-09 13:38:34

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

问题描述

2 个解决方案

解决方案1 0 2017-02-09 12:16:25

解决方案2 0 2017-02-09 13:38:34

解决方案1
0 2017-02-09 12:16:25

解决方案2
0 2017-02-09 13:38:34