[英]Open a form after clicking more cell table (jquery/php)
I have a page with a calendar table and i've used this script to change bgcolor (css class .clicked) value of one or more td tag. 我有一个带有日历表的页面,并且我已经使用此脚本来更改一个或多个td标签的bgcolor(css类.clicked)值。
$(document).mousedown(function() {
$("td#target").bind('mouseover',function(){
$(this).toggleClass('clicked');
});
})
.mouseup(function() {
$("td#target").unbind('mouseover');
});
$("td#target").mousedown(function() {
$(this).toggleClass('clicked');
});
Now i need that on mouseup will open a popup form, but i'm not able to do it. 现在,我需要在mouseup上将打开一个弹出表单,但是我无法做到这一点。 Can you help me?
你能帮助我吗?
Example: i'm selecting cells from 15 to 20 may, on mouse click will open a popup with a form "Compile these fields for day 15-16-17-18-19-20" 示例:我正在选择5月15日至20日的单元格,单击鼠标将打开一个弹出式窗体,形式为“为15-16-17-18-19-20天编译这些字段”
Thank you 谢谢
You can just make divs that are positioned fixed or absolute and they will overlay the underlaying content. 您可以将div定位为固定或绝对,它们将覆盖底层内容。 The overlaying div(popup) will be a normal div where you can make forms and whatever you want.
覆盖的div(popup)将是普通的div,您可以在其中创建表格以及任何所需的内容。 Here is a quick jsfiddle I threw toghether: http://jsfiddle.net/0zvqm5nr/35/
这是我一起扔的一个快速jsfiddle: http : //jsfiddle.net/0zvqm5nr/35/
Here is the code of the jsfiddle: 这是jsfiddle的代码:
HTML 的HTML
<div class="calendar">
Your calendar would be here and for every entry you can generate a div 'calendar-entry' as shown in the html
<div class="calendar-entry">
<button id="popupButton" class="calendar-entry-button">15.05.2015</button>
<div class="popup">
<h2>15.05.2015</h2>
Activity:
<form action="somesite.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
<input type="submit" value="save">
</form>
</div>
</div>
<div class="calendar-entry">
<button id="popupButton" class="calendar-entry-button">16.05.2015</button>
<div class="popup">
<h2>16.05.2015</h2>
Activity:
<form action="somesite.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
<input type="submit" value="save">
</form>
</div>
</div>
and so on...
CSS 的CSS
.calendar {
width: 500px;
height: 500px;
background: green;
}
.popup {
width: 500px;
height: 500px;
background: grey;
display: none;
position: fixed;
top: 0;
left: 0;
}
Javascript Java脚本
var buttons = document.getElementsByClassName("calendar-entry-button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.parentNode.getElementsByClassName("popup")[0].style.display = "block";
}
}
I hope this helped. 希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.