ASP.NET 웹 양식 모달 양식

Question

다음 웹 양식에서 볼 수있는 다음 형식의 양식을 복제/에뮬레이트하려고합니다. On Log In 사용자가 Forgot Password 링크를 클릭하면 상단에 지침 텍스트가 있고 사용자가 전자 메일을 입력 할 수있는 텍스트 상자가있는 모달 양식이 나타납니다 (로그인 양식 바로 위). 모달 "암호 찾기"양식은 다른 ASP.NET 웹 양식으로 만 만들어야합니까? 아니면 다른 접근법이 있습니까? 여기

Answer 1

는이 작업을 수행하는 방법은 다음과 같습니다

ScriptManager.RegisterStartupScript(this, GetType(), "ModalPopup", "ModalPopup()", true); 

이 ^이 다음 코드를 실행합니다 :

뒤에 코드에 이것을 추가 모달을 여는 버튼을 만들고 버튼 클릭 명령에.

<div id = modalpopup style="display:none;"> 
<asp:Table runat = "server"> 
<asp:TableRow> 
      <asp:TableCell HorizontalAlign="Right">Textbox:</asp:TableCell> 
      <asp:TableCell HorizontalAlign="Left"> 
       <asp:Table runat="server"> 
        <asp:TableRow> 
         <asp:TableCell> 
          // textbox here 
         </asp:TableCell> 
        </asp:TableRow> 
        </asp:Table> 
      </asp:TableCell> 
     </asp:TableRow>  
</asp:Table> 
      <asp:Button runat="server" ID="btnAddTransaction" Style="display: none" Text="Submit" OnClick="btnAddModalTransaction_Click" ValidationGroup="Transaction" CausesValidation="true" /> 
      <asp:Button ID="btnCancelAddTransaction" runat="server" Style="display: none" Text="Cancel" OnClick="btnCancelAddTransaction_Click" CausesValidation="false" /> 

</div> 

// --------------- 자바 스크립트 모달 팝업

  function ModalPopup() { 
     $("#modalpopup ").dialog({ 
      modal: true, 
      width: 800, 
      appendTo: "form", 
      open: function() { 


       // The two lines below are 2 different ways to ensure the 
       // background is completely grayed out if the modal is larger 
       // then the page. The first was chosen so that the scroll 
       // bars are not disabled. 
       $('.ui-widget-overlay').css('position', 'fixed'); 
       //$('body').css('overflow', 'hidden'); 
       $(this).dialog('option', 'position', 'center'); 
      }, 
      buttons: { 
       "Submit": function() {           
        $("[id*=btnAddTransaction]").click();        
       }, 

       "Cancel": function() {       
        if (confirm("Are you sure you want to cancel ?")) { 
         $("[id*=btnCancelAddTransaction]").click();        
        } 
       } 
      }, 
      close: function (ev, ui) { 
       $(this).remove();     
       $('.ui-widget-overlay').css('position', 'absolute'); 
      } 
     }); 

(스크립트 폴더 안에)이 지역의 스크립트에 대한 참조를 포함해야합니다 귀하의 사이트 마스터 :

Answer 2

당신이 아약스/자바 스크립트는 HTML을 & CSS를 사용하는이 방법을 시도 사용하지 않고 모달 팝업을 만들려면 : http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

을

모달 div를 수정하여 코드 숨김의 메서드에 연결합니다. 당신은 전자 우편을 보내거나 당신이 좋아하는 무엇이든 할 수 있도록 똑같이 할 수 있습니다. CSS에서 불투명도 특성을 제거하고 아래와 같이 모달 div 기본 표시 유형을 visible = false로 설정하면됩니다.

CSS :

</style>  
    .modalDialog { 
     position: fixed; 
     font-family: Arial, Helvetica, sans-serif; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,0.8); 
     z-index: 99999; 
     -webkit-transition: opacity 400ms ease-in; 
     -moz-transition: opacity 400ms ease-in; 
     transition: opacity 400ms ease-in; 
    } 
    .modalDialog > div { 
     width: 400px; 
     position: relative; 
     margin: 10% auto; 
     margin-left:20%; 
     padding: 5px 20px 13px 20px; 
     border-radius: 10px; 
     background: #fff; 
     background: -moz-linear-gradient(#fff, #999); 
     background: -webkit-linear-gradient(#fff, #999); 
     background: -o-linear-gradient(#fff, #999); 
    } 
    .close { 
     background: #606061; 
     color: #FFFFFF; 
     line-height: 25px; 
     position: absolute; 
     right: -12px; 
     text-align: center; 
     top: -10px; 
     width: 24px; 
     text-decoration: none; 
     font-weight: bold; 
     -webkit-border-radius: 12px; 
     -moz-border-radius: 12px; 
     border-radius: 12px; 
     -moz-box-shadow: 1px 1px 3px #000; 
     -webkit-box-shadow: 1px 1px 3px #000; 
     box-shadow: 1px 1px 3px #000; 
    } 
    .close:hover { background: #00d9ff; } 
</style> 

HTML : 뒤에

<asp:Button ID="btnOpenModal" runat="server" Text="Open Modal Window" OnClick="btnOpenModal_Click" /> 
<br /> 
<div id="divModal" runat="server" class ="modalDialog" visible="false"> 
    <div> 
     <asp:LinkButton ID="lbtnModalClose" runat="server" CssClass="close" Text="X" OnClick="CloseModal" /> 
     <h2>Modal Box</h2> 
     <p>This is a sample modal box that can be created using CSS3.</p> 
     <br /> 
     <asp:Button ID="btnEmail" runat="server" Text="Send Email" Onclick="SendEmail" /> 
     <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="CloseModal" /> 
    </div> 
</div> 

C# 코드는 :

protected void btnOpenModal_Click(object sender, EventArgs e) 
{ 
    divModal.Visible = true; 
} 
protected void CloseModal(object sender, EventArgs e) 
{ 
    divModal.Visible = false; 
} 
protected void btnEmail(object sender, EventArgs e) 
{ 
    //put your code here that sends an email 
}