Тема: CSS, JavaScript: не работает анимация в HTA
Добрый день, коллеги!
В HTA для вывода диалогового окна "About" использую
function myAbout()
{
showModalDialog("about.htm", [document.body.className, addSpaces(VersionNumber, 2, 3)], "dialogHeight:150px;dialogWidth:300px;center:yes;edge:sunken;help:no;resizable:no;scroll:no;status:no;unadorned:yes");
}
В файле about.htm крутится, используя CSS анимацию, логотип
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>About Surway</title>
<style type="text/css">
<!--
BODY.ru .en {display:none;}
BODY.en .ru {display:none;}
a:hover
{
color: darkred;
}
img
{
float: left;
display: block;
vertical-align: bottom;
animation-name: myAnimation;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-fill-mode: none;
margin: 0% 5% 0% 2%;"
}
@keyframes myAnimation
{
80%
{
transform:rotate(360deg);
}
}
button:hover
{
color: darkred;
background-color: goldenrod;
}
-->
</style>
<script type="text/javascript">
function showFrame()
{
document.body.className=dialogArguments[0];
version.innerText = dialogArguments[1];
document.title = (document.body.className == "en" ? "About Surway application" : "О программе Surway");
}
</script>
</head>
<!-- "background-color: #f0f0f0; background-image: url(23.png); background-position: 95% 95%; background-repeat: no-repeat; padding:3%; margin:0%; overflow: hidden;" -->
<body class="en" onload="showFrame();" style="background-color: #f0f0f0; background-image: url(default.png); background-position: 95% 95%; background-repeat: no-repeat; padding:3%; margin:0%; overflow: hidden;">
<br />
<p style="font-size: 10px; font-weight: bold; font-family: sans-serif; margin-top:5px;">
<img src="favicon.png" alt="" />
<span class="en">Copyright: ДДДДДД <br />Product Version: </span>
<span class="ru">Авторское право: DDDDDD <br />Версия программы: </span>
<span id="version"></span>
<span class="en"><br />bla-bla-bla</span>
<span class="ru"><br />бла-бла-бла</span>
</p>
<center>
<button onclick="window.close();" style="border-radius: 10px;">OK</button>
</center>
</body>
</html>
При этом при запуске из родительского HTML анимация работает, углы кнопки скругляются, но стоит родителя переименовать в HTA, как эти CSS красивости в модальном диалоге перестают работать. В родительском файле заголовок следующий:
<!DOCTYPE HTML>
<html>
<head>
<title>Survey calculation</title>
<meta charset="utf-8">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)" />
<meta name="Author" content="Yuri V.Kaplan" />
<meta name="Reply-To" content="dd.ddddd@yandex.com" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<hta:application id="Surway"
applicationname="Survey calculation"
border="dialog"
borderstyle="normal"
caption="yes"
icon="favicon.ico"
maximizeButton="yes"
minimizeButton="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="yes"
windowstate="normal"
selection="yes"
navigable="no"
contextmenu="yes"
innerborder="yes"
SCROLL="no"
/>
Возможно ли победить эту проблему?
Спасибо!