Jquery를 사용하여 ASPX 페이지의 배경 또는 모든 컨트롤 비활성화

Question

이 코드를 사용하여 삭제 버튼을 확인할 수있는 대화 상자를 표시했지만 정상적으로 작동하지만 팝업 될 때 ASP의 컨트롤을 비활성화하지 않습니다 .Net 페이지에서 컨트롤이나 텍스트 상자 중 하나를 클릭 할 수 있습니다.

Jquery가 내 div 태그 BOX를 열고 두 번째 컨트롤을 사용하지 않도록 설정할 때 페이지에서 페이드 아웃하는 것이 가장 좋습니다.

여기에 코드입니다

사업부 (사용자 Dialouge 상자)

<div id="divConfMessage"> 
     <div align="center"> 
      <br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br /> 
      <asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button> 
      <asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br /> 
     </div> 
</div> 

스크립트 (JQuery와)

<script type="text/javascript" src="/_layouts/1033/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input[id$='btDelete']").click(function() 
     { 
     $("#divConfMessage").fadeIn(); 
     }); 
    }); 
</script> 

버튼

대화 상자

#divConfMessage 
{ 
    position: absolute; 
    width: 500px; 
    height: 200px; 
    top: 50%; 
    left: 30%; 
    margin-left: -150px; /* Negative half of width. */ 
    margin-top: -100px; /* Negative half of height. */ 
    border: 2px solid #000; 
    DISPLAY:none; 
    background-color:White; 
    line-height:20px; 
    text-align:center; 
} 

참고 53,691,363,210는

<td> <asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click" OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" /> </td> 

CSS는 모든 코드는 CSS를 제외하고 페이지에 대한 ASP 컨텐츠 장소 홀더에

, 나는 다른 컨트롤이 개 다른 내용을 가지고 + 마스터 페이지는 모든 콘텐츠 플레이스 홀더를 정의합니다.

<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server"> 
<%@ Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %> 

Answer 1

modal = true; dilogbox에는 모달 속성이 있습니다. True로 설정할 수 있습니다.

Jquery dialogue box (JqueryUI 플러그인과 함께 제공)을 사용해보십시오.

$("#YourDivorContainerToShowAsDialog").dialog({ 
      modal: true, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

편집 :이

$("#YourDivorContainerToShowAsDialog").dialog({ 
       modal: true    
      }); 

처럼 사용하거나 CSS를 사용하려면 다음

#YourDivorContainerToShowAsDialog 
{ 
position: absolute; 
Z-index: withMaxValue 
} 

Answer 2

가주세요 시도 할 수 있습니다 다음, 버튼을 사용하지 않으려면 Z-index#divConfMessage을 입력 한 다음 모달 dalog가 맨 위에 표시됩니다.

당신이 대화 상자를 추가

이 방법으로 신체에 추가 :

add_block_page(); 
add_modal_box(); 



function add_block_page(){ 
    var block_page = $('<div class="page"></div>'); 
    $(block_page).appendTo('body'); 
} 

function add_modal_box(){ 
    var pop_up = $('<div id="divConfMessage"></div>'); 
    $(pop_up).appendTo('.page'); 
} 

Answer 3

하나를 사용 transperant 이미지가 페이지를 페이드 아웃 할 수 있습니다.

outerDiv를 하나 추가하고 div에 이미지를 적용하십시오. (: 1,103 예)

# outerDiv 
{ 
top:0%; 
left:0%; 
position:absolute; 
background-image:url('../img/FloatingPanel.png');//transperant image 
color:White; 
z-index: 1102; 
Height:100%; 
width:100%; 
} 

outerDiv

에 대한

<div id="outerDiv" style="display:none;"> 
<div id="divConfMessage"> 
     <div align="center"> 
      <br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br /> 
      <asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button> 
      <asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br /> 
     </div> 
</div> 
</div> 

CSS는 outerDiv의 Z-인덱스보다 #divConfMessage에 대한 높은 Z-인덱스를 지정합니다. 는 outerDiv가