MagistrAnatol
Silver Member | Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Помогите осилить такую задачу - (я в скрещивании php+html+js еще не совсем разобрался)
Есть php функция, которая показывает окно сообщения - условия - если формы нет - показываем ее,
если есть - до существующего текста добавляем новый.
Вот мой код
MsgBoxWinStyle.css
Код: .MsgBoxBackGround {
position: fixed;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.54);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: opacity; transform: translateZ(0px);
transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
z-index: 1000;
}
.MsgBoxDialog {
border-radius: 2px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-top: -200px;
overflow: hidden;
z-index: 2000;
width: 500px;
margin-left: -250px;
animation:fadein 0.5s;
-moz-box-shadow :0.4em 0.4em 5px rgba(122,122,122,0.5);
-webkit-box-shadow:0.4em 0.4em 5px rgba(122,122,122,0.5);
box-shadow :0.4em 0.4em 5px rgba(122,122,122,0.5);
}
.MsgBoxHeader {
display: flex;
flex-direction: row;
align-items:center;
justify-content: flex-start;
-webkit-justify-content: flex-start;
background-color: rgb(0, 188, 212);
margin-top: 0px;
width: inherit;
height: 60px;
}
#MsgBoxImg{
padding: 4px;
width: 48px;
height: 48px;
}
#MsgBoxH3 {
background-color: rgb(0, 188, 212);
text-align: center;
color: #ed1b2b;
font-size: x-large;
width: inherit;
padding: 4px;
}
.MsgBoxContent {
padding: 0 1em;
/*border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: WhiteSmoke;*/
}
#MsgBoxWin button {
float: right;
line-height: 20px;
margin: 10px;
border: none;
border-radius: 2px;
background: teal;
color: #ffffff;
width: 120px;
height: 40px;
font-size: large;
}
#MsgBoxWin button[type="button"]:hover {
cursor: pointer;
color: #ed1b2b;
background: #26A69A;
}
|
и сама функция
Код: function fShowModalWindow($img, $HeaderText, $BodyText)
{
echo '
<script >
if (document.getElementById(\'MsgBoxWin\').style.display!==\'none\'){
var MsgText = document.getElementById("MsgBoxContentText").innerHTML;
$BodyText = "$BodyText"+MsgText;
}
</script>
<form method="post" >
<link rel="stylesheet" type="text/css" href="MsgBoxWinStyle.css">
<div id="MsgBoxWin" >
<div class="MsgBoxBackGround"></div>
<div class="MsgBoxDialog">
<div class="MsgBoxHeader">
<img id="MsgBoxImg" src='. $img .'>
<h3 id="MsgBoxH3">' . $HeaderText . '</h3>
</div>
<div class="MsgBoxContent">
<p id="MsgBoxContentText">' . $BodyText . '</p>
</div>
<button type="button" onClick="getElementById(\'MsgBoxWin\').style.display=\'none\';">Закрити</button>
</div>
</div>
</form>
';
}
|
как бы почти работает, за исключеним что при повторном вызове создается новый екземляр формы и нижнюю форму нельзя закрыть |
