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

我想使用模型做一個對話框。但我沒有得到輸出。這裏是我的代碼如何使用Jquery在ASP.Net中創建對話框？

頭文件

<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。從這裏只有我得到的代碼。我認爲在頭標籤中安排鏈接的問題。

我收到了錯誤消息。我認爲這個錯誤與這個模型無關。

錯誤味精

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

來源

2017-02-09 mohamed faisal

爲什麼負號？這有什麼不對嗎？ –

嘗試查看您是否在瀏覽器控制檯中收到任何錯誤。（PS：我不是那個downvoted的人） –

@ it'satrap那個錯誤味精我已經加了。請檢查 –

改變按鈕id到一個不帶空格。你不能在ID中使用空格。看起來您正在以與class相同的方式使用它，您可以在其中添加多個值。

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

然後，如果您修改jQuery偵聽器，模式將打開。

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

而那些你失蹤的圖像可以是downloaded here。它們包含在UI下載中。

來源

2017-02-09 12:16:25 VDWWD

您需要安排標題標記，如下所示。以下是工作代碼。頭文件序列很重要。

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

來源

2017-02-09 13:38:34

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

回答

相關問題