Я пытаюсь отключить фон после запуска всплывающего окна в окне. Следующий код, который я использую в div, отображает форму для ввода информации, которая должна быть передана в db.
Html:
<div id="add_project">
<a href="#" title="Close">
<div class="close">
<p class="x">x</p>
</div>
</a>
<h3>Add Project</h3>
<form method="post">
<table width="300" align="center">
<tr></tr>
<tr></tr>
<tr style="border: none">
<td align="center">
<input type="text" name="project name" placeholder="Enter Project Name" />
</td>
</tr>
<tr></tr>
<tr style="border: none">
<td align="center">
<input type="text" name="project description" placeholder="Project Description" />
</td>
</tr>
<tr></tr>
<tr style="border: none">
<td align="center">
<input type="button" value="Save" />
</td>
</tr>
<tr style="border: none">
<td align="center">
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</div>
JQuery, чтобы скрыть и показать div:
$("#add_project").hide();
$("#addProject").click(function () {
$("#add_project").fadeIn(1000);
$(".close").fadeIn(500);
});
Всегда есть много способов сделать что-то. Я бы установил div, который вы намереваетесь всплывать, как диалог, и просто открывайте его, когда это необходимо. Это автоматически перекрывает остальную часть страницы и предотвращает ввод пользователя. Вот и пример:
<script type="text/javascript">
$(document).ready(function () {
$("#divDialog").dialog(
{
modal: true,
autoOpen: false,
width: 700,
buttons: { Cancel: function () { $(this).dialog("close"); } }
}
);
});
</script>
<div id="divDialog" title="Data Modification">
//elements to enter or modify data
</div>
а затем в процессе щелчка:
$('#divDialog').dialog('open');
Не могли бы вы попробовать этот jsfiddle?
если он работает нормально, тогда вам нужно изменить JQuery, как показано ниже.
Ваш HTML-код
<div class="close" style="background-color:yellow"><a href="#" title="Close">
<div ><p class="x">x</p></div></a></div>
<div id="add_project" style="background-color:green" >
<h3>Add Project</h3>
<table width="300" align="center">
<tr></tr>
<tr></tr>
<tr style="border: none">
<td align="center"><input type="text" name="project name" placeholder="Enter Project Name" /></td>
</tr>
<tr></tr>
<tr style="border: none">
<td align="center"><input type="text" name="project description" placeholder="Project Description" /></td>
</tr>
<tr></tr>
<tr style="border: none">
<td align="center"><input type="button" value="Save" /></td>
</tr>
<tr style="border: none">
<td align="center"><input type="reset" value="Cancel" /></td>
</tr>
</table>
</div>
Код JQuery...
$(document).ready(function(){
$(".close").fadeOut(500);
$("#add_project").click(function() {
$(this).hide();
$(this).fadeOut(1000);
$(".close").fadeIn(500);
});
$(".close").click(function() {
$('#add_project').show();
$('#add_project').fadeIn(1000);
$(this).fadeOut(500);
});
});
$("#add_project").fadeIn(1000, function(){
$('#background_element').css({"backgroundImage":"none"});
//Or
$('#background_element').hide();
});
Чтобы показать это снова после закрытия всплывающего окна.
$("#add_project").fadeOut(1000, function(){
$('#background_element').css({"backgroundImage":"yourbackgroundimage.gif"});
//Or
$('#background_element').show();
});