如何使用Jquery在ASP.Net中創建對話框？

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;
    });
});

請不要建議這個小提琴。 從這里我只有代碼。 我認為在head標簽中安排鏈接的問題。

我收到錯誤消息。 我認為該錯誤與該模型無關。

錯誤味精

jquery-3.1.1.js：6170 GET 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偵聽器，則模式將打開。

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

那些您丟失的圖像可以在這里下載。 它們包含在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 個解決方案

解決方案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