如何在弹出窗口或工具提示中显示自定义HTML

Question

我想使用fullcalendar显示Google日历等工具提示/弹出窗口。

每当用户点击一个日期单元格时，就会弹出一个屏幕，我想在其中显示自定义的HTML/PHP代码。当用户输入我想要使用PHP将其保存在数据库中的值时。

Answer 1

我对jquery了解不多，但试试这个链接。有人问了一个类似的问题。我希望这有帮助。 popup for full calendar in jquery 您的项目一切顺利！

Answer 2

您可以使用几个不同的库（例如http://www.jquerypopup.com/）。

然后使用这样的事情：

$(document).ready(function() { 
    //Change these values to style your modal popup 
    var align = 'center';          //Valid values; left, right, center 
    var top = 100;            //Use an integer (in pixels) 
    var padding = 10;           //Use an integer (in pixels) 
    var backgroundColor = '#FFFFFF';       //Use any hex code 
    var borderColor = '#000000';        //Use any hex code 
    var borderWeight = 4;          //Use an integer (in pixels) 
    var borderRadius = 5;          //Use an integer (in pixels) 
    var fadeOutTime = 300;          //Use any integer, 0 = no fade 
    var disableColor = '#666666';        //Use any hex code 
    var disableOpacity = 40;         //Valid range 0-100 
    var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page 

    //This method initialises the modal popup 
    $(".modal").click(function() { 
     var source = 'intro.php'; //Refer to any page on your server, external pages are not valid 
     var width = 500;     //Use an integer (in pixels) 

     modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage); 
    }); 

    //This method initialises the modal popup 
    $(".landscape").click(function() { 
     var source = 'lib/landscape.jpg'; //Refer to any page on your server, external pages are not valid 
     var width = 920;     //Use an integer (in pixels) 
     var top = 10;      //Use an integer (in pixels) 

     modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage); 
    }); 

    //This method hides the popup when the escape key is pressed 
    $(document).keyup(function(e) { 
     if (e.keyCode == 27) { 
      closePopup(fadeOutTime); 
     } 
    }); 
}); 

或者使用此选项无插件：How to generate a simple popup using jQuery

我发现jQuery Mobile的插件非常有用：

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/

<script src="../../../js/jquery.mobile-1.2.0-alpha.1.js"></script> 
<a href="#popupBasic" data-rel="popup">Open Popup</a> 

<div data-role="popup" id="popupBasic"> 
    <p>This is a completely basic popup, no options set.<p> 
</div> 

Answer 3

我已经设法回答我自己的问题estion。我已在FullCalendar初始化如下：

select: function(start, end, allDay, jsEvent, view){ 
    $('#addEvent').css({ left: jsEvent.pageX, top: jsEvent.pageY }).show("slow").fadeIn(); 
}, 

在该方法中我使用了一个隐藏的DIV，这是目前在我的HTML，像这样：

<div id="addEvent" style="display: none; background-color:#F7F7F7;position: absolute; width: 300px; z-index: 1000;"> 
</div> 

Answer 4

我觉得eventRender回调是更好适合这个。

检查此琴： http://jsfiddle.net/100thGear/h9cC6/

Answer 5

看看我的小提琴链接FullCalendar with QTip

请参阅本FullCalendar Document