Fancybox (Jquery を使用) を使用して、モーダル スタイルのログイン ウィンドウを実装しています。モーダル ボックスは、Internet Explorer 8 を除くすべてのブラウザーで適切に表示されます。
Internet Explorer 8 では、フォーム要素 (ラベル、ボタン、およびフィールド) がすべて欠落しています。z-index の配置と関係があると思われますが、わかりません。
問題のページはhttp://d2-sandbox.parature.com/ics/support/default.asp?deptID=8210にあります。
右上の[サインイン] ボタンをクリックして、問題を確認します。私が言ったように、IE8 は問題のある唯一のブラウザーです。
これがFancyboxへの私の呼びかけです：
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
scrolling : 'no',
width : '500',
height : '286',
closeEffect: 'elastic',
openEffect: 'fade'
});});
ログインボタンのコードは次のとおりです。
a class="fancybox fancybox.iframe" href="http://www.chrishallahan.com/parature-small.html">
...そして、これがiframeである私のログインフォームのコードです:
<body>
<h1><span id="hide">suppport.kent.edu - Online Technology Help Center at Kent State University</span></h1>
<div id="login-form">
<form name="loginForm" method="post" action="https://parature.kent.edu/default.aspx" target="_parent">
<label class="label">User Name:</label><input name="userid" class="searchbox" value="blank" size="30" type="text" /> <span class="email">@kent.edu</span><br />
<label class="label">Password:</label><input name="password" class="searchbox" value="blank" size="30" type="password" /><a class="forgot" href="https://login.kent.edu/ForgotPassword.aspx" target="_parent">Forgot Your Password?</a><br/>
<input type="submit" name="Button1" value="Log In" id="Button1" />
</form>
</div>
<div id="footer"><div id="text">Please log in with your FlashLine user name and password.</div></div>
どんな入力でも大歓迎です！