JavaScript を使用して Web ページにモーダル ダイアログを作成する必要があります。通常、これは jQueryUI や BlockUI などを使用できるので簡単ですが、ここでの注意点は、jQuery の使用は許可されておらず、IE9 quirks モード (つまり、html5 doctype なし) をサポートする必要があるということです。必要なものに関連するものをオンラインで見つけることができません。誰か提案がありますか？ありがとう。
質問する
57105 次
7 に答える
6
必要なことを行うtomloprodModalという
ライブラリを作成しました。依存関係のない、レスポンシブで最小限のモーダル ウィンドウを作成するためのシンプルで構成可能な JavaScript ライブラリです。
お役に立てば幸いです。
インストール:
tomloprodModel.cssとtomloprodModel.jsをダウンロードして、Web サイトに追加するだけです。
bowerも使用できます:bower install tomloprodModalまたはnpmを使用:npm install tomloprodModal
初期化:
Javascript:
TomloprodModal.start({
closeOut: true,
bgColor: "#FFFFFF",
textColor: "#333333"
});
モーダル ウィンドウの例:
<div class="tm-modal tm-effect tm-draggable" id="logInPopUp">
<div class="tm-wrapper">
<div class="tm-title">
<span class="tm-XButton tm-closeButton"></span>
<h3 class="tm-title-text">Lorem Ipsum...</h3>
</div>
<div class="tm-content" >
<div style="text-align:center">
<img width="250" src="http://s3.favim.com/orig/47/animal-cat-cute-kitty-surprise-Favim.com-434324.jpg"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
</p>
</div>
</div>
</div>
結果：
または、HTML なしでモーダル ウィンドウを作成することもできます。
TomloprodModal.create({
bgColor: "#FFFFFF",
textColor: "#333333",
title: "Hi!",
content: "Nothing to say",
closeTimer: 1000
});
ドキュメンテーション：
https://github.com/tomloprod/tomloprodModal
デモ：
于 2016-09-05T17:21:05.340 に答える
0
まさにこの目的のためにいくつかの単純な JavaScript 関数と、それらの使用方法を示すデモ ページを作成しました。これはhttp://www.interbit.com/demos/modal.htmlで見ることができます。
私が書いた関数は、MsgBox()、YesNo()、および YesNoCancel() と呼ばれます。彼らはその名前が意味することを行います。
それらを使用するには、上記のリンクで JavaScript ファイルのコピーを作成し、それを HTML に含めます。ファイルにリンクするだけにしないでください。むしろ、いつでも変更したり削除したりする可能性があるため、コピーを作成してください。
サンプル:
MsgBox("This is a message for the user.", "This is the title");
MsgBox("This is a message for the user.", "This is the title", "JSSnippetToCall();");
YesNo("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();");
YesNoCancel("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();", "JSSnippetToCallOnCancel();");
JavaScript Error() という関数も含めました。この関数は、JavaScript エラー オブジェクトを受け取り、それをユーザーに表示するようにフォーマットします。これは、try/catch ブロックでの使用に適しています。
try {
<your JavaScript code here>
} catch (e) {
JavaScriptError(e);
}
コメンターの1人が提案したように、コードの完全なリストを次に示します。すべてのプロジェクトに含めることができます。信用してほしいという皮肉なコメントがいくつかありますが、実際に私が求めているのは一般的な礼儀だけです。あなたがコードを盗んで自分で書いたと主張しない限り、私は誰かを訴えるつもりはありません。
/**************************************************************************************************/
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/**************************************************************************************************/
/* The functions below are each self-contained and can be copied into any HTML file by themselves
/* and used. The CSS styling is accomplished by using the STYLE attribute on each HTML tag. There
/* is no need to use external CSS. Of course, once you copy the code you can modify it to suit
/* your needs, including changing the styling. But be careful, especially with the msgBoxDivStyle,
/* because some of it is necessary to achieve the desired effect.
/*
/* You are free to simply copy this JavaScript code into your application, as long as you include
/* the copyright notice in each copy of the code you make. No exceptions. If you don't, and I
/* find out, I'll sue you for enough money to retire on. Because that's just rude and rude
/* people need to be sued to make the world a better place. You are also free to modify the code
/* to suit your needs. But if you do, you still need to give me credit.
/*
/* To see how these functions can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/*
/* I recognize that this code could easily have been written more efficiently, and without some of
/* the redundancy. I intentionally wrote it the way I did to make it more easily understandable
/* and modifiable to meet your needs.
/**************************************************************************************************/
/**************************************************************************************************/
/* Function MsgBox
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, onOK
/* Description: This function displays a modal message box with a single OK button.
/* When the user clicks the OK button the box is removed and the JavaScript provided
/* in the onOK parameter, if any, is called.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function MsgBox(msg, title, onOK) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Information";
}
if (onOK == null) {
onOK = "";
}
titleStyle = msgBoxTitleStyle;
if (title == "Error" || title == "JavaScript Error" || title == "Exception") {
titleStyle = msgBoxErrorTitleStyle;
} else if (title == "Success") {
titleStyle = msgBoxSuccessTitleStyle;
} else if (title == "Warning") {
titleStyle = msgBoxWarningTitleStyle;
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + titleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerOK' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='K' onclick='" + onOK + "document.body.removeChild(this.parentElement.parentElement);'>O<u>K</u></button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterBegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Disable the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerOK').onkeydown = function(e){if(e.keyCode==9){return false;}}
document.getElementById('answerOK').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function YesNo
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, onYes, onNo
/* Description: This function displays a modal message box with two buttons labeled "Yes" and "No".
/* When the user clicks either button the box is removed and the appropriate
/* JavaScript (passed in the onYes and onNo parameters) is executed.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function YesNo(msg, title, onYes, onNo) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Confirm";
}
if (onYes == null) {
onYes = "";
}
if (onNo == null) {
onNo = "";
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + msgBoxTitleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerYes' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='Y' onclick='" + onYes + "document.body.removeChild(this.parentElement.parentElement);'><u>Y</u>es</button>";
msgDiv += "<button id='answerNo' tabindex='2' style='" + msgBoxButtonStyle + "' accesskey='N' onclick='" + onNo + "document.body.removeChild(this.parentElement.parentElement);'><u>N</u>o</button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterbegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Intercept the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}}
document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}}
// Put the user's focus on the Yes button.
document.getElementById('answerYes').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function YesNoCancel
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, Callback
/* Description: This function displays a modal message box with three buttons labeled "Yes", "No",
/* and "Cancel". When the user clicks any of the buttons the box is removed and the
/* appropriate JavaScript (passed in the onYes, onNo, and onCancel parameters)
/* is called, if any.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function YesNoCancel(msg, title, onYes, onNo, onCancel) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Confirm";
}
if (onYes == null) {
onYes = "";
}
if (onNo == null) {
onNo = "";
}
if (onCancel == null) {
onCancel = "";
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + msgBoxTitleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerYes' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='Y' onclick='document.body.removeChild(this.parentElement.parentElement);" + onYes + "'><u>Y</u>es</button>";
msgDiv += "<button id='answerNo' tabindex='2' style='" + msgBoxButtonStyle + "' accesskey='N' onclick='document.body.removeChild(this.parentElement.parentElement);" + onNo + "'><u>N</u>o</button>";
msgDiv += "<button id='answerCancel' tabindex='3' style='" + msgBoxButtonStyle + "' accesskey='C' onclick='document.body.removeChild(this.parentElement.parentElement);" + onCancel + "'><u>C</u>ancel</button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterbegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Intercept the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}}
document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerCancel').focus();return false;}}
document.getElementById('answerCancel').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}}
// Put the user's focus on the Yes button.
document.getElementById('answerYes').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function JavaScriptError
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: JavaScript Error Object
/* Description: This function formats and uses the MsgBox function to display a JavaScript Error.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function JavaScriptError(e) {
var msg = "";
try {
msg = e.name + "<br /><br />" + e.message + "<br /><br />" + e.stack;
} catch (e) {
msg = e.message;
}
try {
MsgBox(msg, "JavaScript Error");
} catch (e1) {
alert(msg);
}
}
/**************************************************************************************************/
/* Function jsonError
/* Parameters: JSON object with the following properties: errNumber, errMessage.
/* The JSON object may have additional properties, but it will only use the errNumber
/* and errMessage properties.
/* Description: This function formats and displays a JSON error.
/**************************************************************************************************/
function jsonError(err) {
msg = "Error " + err.errNumber + "<br /><br />";
msg += err.errMessage + "<br /><br />";
MsgBox(msg, "Exception");
}
于 2016-03-14T18:36:56.477 に答える
0
ModaliseJSは、どの CSS よりも軽量でtomloprodModal互換性があります。
HTML : (独自のデザインがある場合やブートストラップを使用している場合は modalise.css を省略してください)
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
コード :
var myModal = {}
window.onload = function(){
// It is one of the button Modalise will attach the Show event.
// Note that you can use Modalise without the events, by omitting the .attach() function.
// Then, you can use show() or hide() to use it manually without overload.
var btnOpen = document.getElementById('openModal');
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onShow', console.log)
.on('onConfirm', console.log)
.on('onHide', console.log);
}
于 2016-10-28T08:12:08.800 に答える
0
私は JavaScript のファンではありませんが、プレーンな HTML とよりシンプルな JavaScript を使用して必要なものを実現する、優れたクロスブラウザー モーダル ウィンドウを次に示します。
- このコードは JQuery や Bootstrap を必要としません
- このコードは、 Internet Explorer 9を含む新旧のブラウザーで動作します
- このコードは、ほぼすべてのブラウザーで動作する単純な昔ながらの JavaScript を使用しています。
- このコードは、新しい HTML5
<dialog>要素を使用しており、この要素を認識していない古いブラウザー向けの単純なフォールバック コードを備えています (2021 年には非常に長いリストになります!)。
以下の HTML ブロックと JavaScript ブロックを貼り付けて、必要に応じてカスタマイズしてください。
HTML (注: CSS はインラインで追加されるため、スタイル シートに移動します)
<div id="dialogbox_alt" role="dialog" aria-label="Alternate Dialog">
<dialog id="dialogbox" role="dialog" aria-label="Dialog" style=" display:none; width: 20em; max-width: 50%; padding: 1em; background-color: #fff; border: 2px solid #999; border-radius: .5em; /* center all dialogs */ position: fixed; top: 50%; left: 50%; margin-left: -10em; margin-top: -5em; z-index: 99; /* create background screen */ box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); ">
<form id="formdialog1" action"#" method="dialog" style="position:relative;width:100%;height:100%;padding:0;margin:0;">
<span id="dialogcloser" style="display:inline-block;cursor:pointer;padding:.2em;position:absolute;top:-5px;right:-5px;">X</span>
<div style="padding:1em;">
<p>
<label for="animals1">Choose an Animal:</label>
<select id="animals1" name="animals1" required="required" aria-required="true" role="listbox" aria-label="List of Animals" tabindex="0">
<option value="" selected="selected">- choose an animal -</option>
<option value="elephant">Elephant</option>
<option value="zebra">Zebra</option>
<option value="lion">Lion</option>
</select>
</p>
<p>
<button type="submit" name="dialogconfirm" value="confirm">Confirm</button>
</p>
</div>
</form>
</dialog>
</div>
<button id="dialogopener" type="button">Open A Dialog Box</button>
JAVASCRIPT (IE9 をサポートするためのすべてのクロスブラウザー機能を備えています)
<script type="text/javascript">
// ================ CROSS-BROWSER DIALOG BOX SCRIPT ===============
// This window.onload" version works in very old browsers. Do not use 'addEventListener'!
window.onload = function () {
// Make sure these element 'ids' match the open and close button and image in your HTML!
var DIALOG_BOX = 'dialogbox';
var DIALOG_BOX_ALT = 'dialogbox_alt';
var DIALOG_OPENER = 'dialogopener';
var DIALOG_CLOSER = 'dialogcloser';
if (document.getElementById(DIALOG_BOX) && document.getElementById(DIALOG_BOX_ALT)) {
if (document.getElementById(DIALOG_OPENER)) {
if (document.getElementById(DIALOG_CLOSER)) {
var dialogbox = document.getElementById(DIALOG_BOX);
var dialogbox_alt = document.getElementById(DIALOG_BOX_ALT);
var dialogopener = document.getElementById(DIALOG_OPENER);
var dialogcloser = document.getElementById(DIALOG_CLOSER);
// OPEN DIALOG : cross-browser script
if (dialogopener.addEventListener) { // W3C DOM
dialogopener.addEventListener('click', function () {
dialogbox.style.display = "block";
if (typeof dialogbox.showModal === "function") {
dialogbox.showModal();
}
}, false);
} else if (dialogopener.attachEvent) { // IE 5-8 DOM
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';// hide the box on first page view
dialogopener.attachEvent('onclick', function () {
// WARNING: All older non-HTML5 supporting browser will not parse the 'dialog' element.
// So, we reveal a plain "div" element instead.
// For IE 5-6
dialogbox_alt.style.cssText = 'display:block;overflow:auto;width:300px;height:150px;padding:10px;background-color: #ffffff;border:2px solid #999999;z-index: 99;position:fixed;top:40%;left:40%;';
// For IE 7-8
dialogbox_alt.setAttribute('style','display:block;width:20em;height:auto;max-width: 50%;padding: 1em;background-color: #fff;border: 2px solid #999999;z-index: 99;border-radius: .5em;position: fixed;top: 50%;left: 50%;margin-left: -10em;margin-top: -5em;');
});
} else { // MISC DOM
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
dialogopener["onclick"] = function () {
dialogbox_alt.style.cssText = 'display:block;overflow:auto;width:300px;height:150px;padding:10px;background-color: #ffffff;border:2px solid #999999;z-index: 99;position:fixed;top:40%;left:40%;';
};
};
// CLOSE DIALOG : cross-browser script
if (dialogcloser.addEventListener) { // W3C DOM
dialogcloser.addEventListener('click', function () {
dialogbox.style.display = "none";
if (typeof dialogbox.showModal === "function") {
dialogbox.close();
}
}, false);
} else if (dialogcloser.attachEvent) { // IE 5-8 DOM
dialogcloser.attachEvent('onclick', function () {
// WARNING: All older non-HTML5 supporting browser will not parse the 'dialog' element.
// So, we reveal a plain "div" element instead.
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
});
} else { // MISC DOM
dialogcloser["onclick"] = function () {
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
};
};
} else {
alert('The "dialogcloser" element is not found by a JavaScript function!\n\nMake sure the "dialogcloser" element id value matches\nthe JavaScript "DIALOG_CLOSER" variable value.');
};
} else {
alert('The "dialogopener" element is not found by a JavaScript function!\n\nMake sure the "dialogopener" element id value matches\nthe JavaScript "DIALOG_OPENER" variable value.');
};
} else {
alert('The "dialogbox" element(s) are not found by a JavaScript function!\n\nMake sure the "dialogbox" element id value matches\nthe JavaScript "DIALOG_BOX" variable value.');
};
};
// ================================================================
</script>
Internet Explorer ブラウザのサポートに関する注意事項:
- IE 10-11 : バックグラウンドで正常に実行されます
- IE 9: 正常に実行されますが、背景はありません
- IE 7-8: 通常どおりに実行されますが、背景や丸い境界線はありません
- IE 4-6: 親ブロック内にダイアログが表示されるが、完全に機能する
于 2021-05-03T04:05:16.093 に答える
-2
使用するposition:fixed
そしてこのフィドル、
私は最初の答えの限界を克服することができました
このデモを取得します。基本的に、フルスクリーンと固定位置のスタイリングとネストされたスクロール可能なコンテンツ div を備えたガラス div が必要です。
document.writeまた、リダイレクトを使用してダイアログを閉じることもできます。
于 2015-03-23T15:14:57.770 に答える