在jquery中弹出完整日历 [英] popup for full calendar in jquery

问题描述

弹出窗口中的任何最佳插件显示作为气球，也处理点击事件（我用来创建/编辑/删除弹出事件）？

解决方案

 < div id =addEventstyle =display： none; position：absolute; width：400px; z-index：1000;> 
< table width =100％cellpadding =0cellspacing =0> 
< tr> 
< td> 
< div class =PopupContainer> 
< div class =header> 
< img src =<％= ResolveUrl（〜/ Content / images / closepopup.gif）％> id =addCalEventClose
 title =关闭alt =关闭class =cursorhand/> 
< / div> 
< div class =clear/> 
< div class =popup> 
 //您的内容转到此处
< / div> 
< / div> 
< div class =clear/> 
< br /> 
< / td> 
< / tr> 
< tr> 
< td> 
< div style =margin-top：-1px> 
< table width =100％cellpadding =0cellspacing =0> 
< tr> 
< td class =taC> 
< img src =<％= ResolveUrl（〜/ Content / images / balloon_arrow.gif）％> title =alt =
 id =addEventBalloon/> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / td> 
< / tr> 
< / table> 
< / div> 
  

调用 $（'＃addEvent'）。css（{left： xPos，top：yPos}）。show（）。fadeIn（）; 用一些javascripting来计算鼠标点击的位置并显示弹出窗口。

I need to show a popup (balloon popup as in google calendar) while creating an event in the jquery full calendar.

Any best plugins for the popup which shows as balloon and also which handles the click events (which I am using to create/edit/delete events from popup)?

解决方案

I wrote my own popup which displays using div with absolute position.

<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div class="PopupContainer">
                    <div class="header">
                        <img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
                            title="Close" alt="Close" class="cursorhand" />
                    </div>
                    <div class="clear" />
                    <div class="popup">
//Your content goes here
</div>
                </div>
                <div class="clear" />
                <br />
            </td>
        </tr>
        <tr>
            <td>
                <div style="margin-top: -1px">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="taC">
                                <img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
                                    id="addEventBalloon" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

call the $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); with some javascripting to calculate the position of mouse click and show the popup.

这篇关于在jquery中弹出完整日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！