2017-02-09 1 views
0

모델을 사용하여 대화 상자를 만들려고합니다. 그러나 나는 결과물을 얻지 못하고있다. 여기에 내 코드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을 제안하지 마십시오. 여기에서 코드를 얻었습니다. 나는 머리 꼬리표에있는 연결을 배열하기에 대한 문제를 생각한다.

오류 메시지가 나타납니다. 나는 그 오류가이 모델과 관련이 없다고 생각한다.

오류 MSG

JQuery와-3.1.1.js : 6170이 http://localhost:55047/css/images/ui-icons_444444_256x240.png 404 (찾을 수 없음) GET

+0

왜 음수 기호가 사용됩니까? 그게 뭐 잘못 됐니? –

+0

브라우저 콘솔에서 오류가 발생하는지 확인하십시오. (추신 : 나는 downvoted 사람이 아니야) –

+0

@ it'satrap 그 오류 msg는 이미 추가했습니다. 확인해주세요 –

답변

0

변경 공백없이 하나의 버튼 id. ID 내부에는 공백을 사용할 수 없습니다. 여러 값을 추가 할 수있는 class과 같은 방식으로 사용하고있는 것 같습니다.

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

그러면 jQuery 리스너를 수정하면 모달이 열립니다.

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

누락 된 이미지는 downloaded here 일 수 있습니다. UI 다운로드에 포함됩니다.

0

다음과 같이 헤더 태그를 정렬해야합니다. 아래는 작업 코드입니다. 헤더 파일 순서가 중요합니다.

<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> 
관련 문제