Question

我有一个带有日历表的页面，我使用此脚本来更改一个或多个td标记的bgcolor（css class .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');
    });

现在我需要在mouseup上打开一个弹出窗体，但我无法做到。你能救我吗？

实施例：我正在选择15到20之间的单元格，点击鼠标会弹出一个弹出窗口，其中包含“为第15-16-17-18-19-20天编译这些字段”

谢谢

Answer 1

您可以创建固定或绝对定位的div，它们将覆盖底层内容。重叠的div（弹出窗口）将是一个普通的div，您可以在其中制作表格和任何您想要的。这是一个快速的问题，我向他们推荐：http://jsfiddle.net/0zvqm5nr/35/

以下是jsfiddle的代码：

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

.calendar {
    width: 500px;
    height: 500px;
    background: green;
}
.popup {
    width: 500px;
    height: 500px;
    background: grey;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

的Javascript

 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";
     }    
}

我希望这会有所帮助。

单击更多单元格表后打开表单（jquery / php）

1 个答案: