1. 표준 방식 코드 복사 코드는 다음과 같습니다. <br>function openWin(src, width, height, showScroll){ <br>window.showModalDialog(src,"","location:No;status: 아니요; help:No;dialogWidth:" width ";dialogHeight:" height ";scroll:" showScroll ";"); <br>} <br> 예: 클릭 2. Firefox는 이 기능을 지원하지 않습니다. window.open ('openwin.html','newWin', 'modal=yes, width=200,height=200,ressible=no, scrollbars=no' ) 3. 브라우저 자동 판별 방법 코드 복사 코드는 다음과 같습니다. 🎜> < !-- <BR> function showDialog(url) <BR> { <BR> if( document.all ) //IE <BR> { <BR> feature="dialogWidth:300px;dialogHeight:200px;status :no;help :no"; <BR> window.showModalDialog(url,null,feature); <BR> } <BR> else <BR> { <BR> //modelessDialog는 모달을Dialog=yes로 대체할 수 있습니다. <BR> feature =" width=300,height=200,menubar=no,toolbar=no,location=no,"; <BR> feature ="scrollbars=no,status=no,modal=yes" <BR> window.open (url, null,feature); <BR> } <BR> //--> <br><br><br><br>4. 모달 대화 상자는 주소 표시줄을 숨기지만 다른 브라우저에서는 반드시 그런 것은 아닙니다. </div> <br><strong> </strong><br> <p><img border="0" alt="" src="http://files.jb51.net/file_images/article/201401/201401110934472.png" style="max-width:90%" style="max-width:90%"></p> <p>[참고] Google Chrome에서는 이 모달의 효과도 무효화됩니다. <img border="0" alt="" src="http://files.jb51.net/file_images/article/201401/201401110934473.png" style="max-width:90%" style="max-width:90%"> <br><br>5. 일반적으로 대화 상자가 나타날 때 전체 상위 페이지의 배경이 반투명 색상으로 변경되어 사용자가 뒷면에 접근할 수 없음을 알 수 있기를 바랍니다. </p> <p><strong> <br></strong></p> <p>대화 상자를 닫은 후 복원하고 싶습니다<img border="0" alt="" src="http://files.jb51.net/file_images/article/201401/201401110934474.png" style="max-width:90%" style="max-width:90%"> </p> <p></p> <p><img border="0" alt="" src="http://files.jb51.net/file_images/article/201401/201401110934475.png" style="max-width:90%" style="max-width:90%">이 작업은 어떻게 수행되나요? </p> <p><strong><br></strong></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="83505" class="copybut" id="copybut83505" onclick="doCopy('code83505')"><u> 코드는 다음과 같습니다.</u></a></span> ///상세 표시 모달 대화 상자를 통해 주문 정보를 확인하면 화면 색상이 변경됩니다. </div> function ShowOrderDetails(orderId) {<div class="codebody" id="code83505"> var url = "details.aspx?orderID=" orderId; <br>// $("본문") ~ <br> $("body").addClass("body1") <br> ShowDetailsDialog(url, "600px", "400px", "예") <p> <br> $ ("body").RemoveClass ("Body1") </p>} <p> </p> <p> 또한 스타일 테이블 정의가 있습니다 </p> .body1 <p> {<br> 배경 색상:#999999;<br> 필터:알파(불투명도=40);</p> </div>} <br><br><br><br><br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span><div class="codebody" id="code23026"> <br><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" ><br><head runat="server"><br> <title></title> <br> <style type="text/css"><br> .body1{<br> background-color:#999999;<br> 필터:알파(불투명도=40);<br> }<br> <br> <script src="jquery.js" type="text/javascript"> <br> function ShowDetailsDialog(src, width, height, showScroll) {<br> window.showModalDialog(src, "", "location:No;status:No;help:NO;dialogWidth:" width ";dialogHeight:" height ";scroll " showScroll ";");<br> }</p> <d d> function showOrderDetails (orderId) { $ ( "body"). addClass ( "body1"); showDetailsDialog (url, ' 500px', '400px', 'no');<br> $("body").removeClass("body1");<br> }<br> 点击
