如何在彈出窗口或工具提示中顯示自定義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