Jqueryを使用してASP.Netでダイアログボックスを作成する方法は？

モデルを使用してダイアログボックスを作成しようとしています。しかし、私は出力を得ていない。ここに私のコードJqueryを使用してASP.Netでダイアログボックスを作成する方法は？

ヘッダファイルはjQueryのコード

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

嘆願

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

ですこの提案はしないでくださいfiddle。ここからはコードだけが得られました。私はヘッドタグにリンクを配置することに問題があると思う。

私は、エラーメッセージが表示されました。私はエラーがこのモデルに関連していないと思う。

エラーMSG

jqueryの - 3.1.1.js：6170、スペースのないものにhttp://localhost:55047/css/images/ui-icons_444444_256x240.png 404（見つかりません）

出典

2017-02-09 mohamed faisal

なぜネガティブマーク？それは間違っていますか？ –

ブラウザのコンソールでエラーが発生していないかどうかを確認してください。（PS：私はdownvoted whoではない） –

@ it'satrapそのエラーmsg私はすでに追加しました。チェックしてください –

変更ボタンidをGET。あなたは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でダイアログボックスを作成する方法は？

答えて

関連する問題