bootstrap jquery彈出窗口大小

在我的應用程序中使用bootstrap和fullcalender彈出窗口的大小顯示不正確。是否可以調整大小？我使用的引導3. enter image description here bootstrap jquery彈出窗口大小

代碼

$(window).load(function() { 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     /* initialize the external events 
     -----------------------------------------------------------------*/ 

     $('#external-events div.external-event').each(function() { 

      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
      // it doesn't need to have a start or end 
      var eventObject = { 
       title: $.trim($(this).text()) // use the element's text as the event title 
      }; 

      // store the Event Object in the DOM element so we can get to it later 
      $(this).data('eventObject', eventObject); 

      // make the event draggable using jQuery UI 
      $(this).draggable({ 
       zIndex: 999, 
       revert: true,  // will cause the event to go back to its 
       revertDuration: 0 // original position after the drag 
      }); 

     }); 



     /* initialize the calendar 
     -----------------------------------------------------------------*/ 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      editable: true, 
      droppable: true, // this allows things to be dropped onto the calendar !!! 
      eventRender: function (event, element) { 
       element.popover({ 
        title: "My Title", 
        placement:'auto', 
        html:true, 
        trigger : 'click', 
        animation : 'true', 
        content: event.msg 
       }); 
       $('body').on('click', function (e) { 
        if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
         element.popover('hide'); 
       }); 
       }, 

      events: [ 
         { 
          title: 'All Day Event', 
          start: new Date(y, m, 1), 
          msg: 'I am OK', 
         }, 
         { 
          title: 'Long Event', 
          start: new Date(y, m, d-5), 
          end: new Date(y, m, d-2), 
          msg: 'I am double OK', 
         }, 
         { 
          id: 999, 
          title: 'Repeating Event', 
          start: new Date(y, m, d-3, 16, 0), 
          allDay: false 
         }, 
         { 
          id: 999, 
          title: 'Repeating Event', 
          start: new Date(y, m, d+4, 16, 0), 
          allDay: false 
         }, 
         { 
          title: 'Meeting', 
          start: new Date(y, m, d, 10, 30), 
          allDay: false 
         }, 
         { 
          title: 'Lunch', 
          start: new Date(y, m, d, 12, 0), 
          end: new Date(y, m, d, 14, 0), 
          allDay: false 
         }, 
         { 
          title: 'Birthday Party', 
          start: new Date(y, m, d+1, 19, 0), 
          end: new Date(y, m, d+1, 22, 30), 
          allDay: false 
         }, 
         { 
          title: 'Click for Google', 
          start: new Date(y, m, 28), 
          end: new Date(y, m, 29), 
          url: 'http://google.com/' 
         } 
        ]  
     }); 

    });

的jsfiddle http://jsfiddle.net/7gwz5/

來源

2013-11-21 Anish

我不fullcalendar知道，但經典的引導酥料餅的結構看起來像這樣：

<div class="popover"> 
    <h3 class="popover-title">Title</h3> 
    <div class="popover-content">Content</div> 
</div>

然後您只需將尺寸設置爲.popover分類s，它應該工作;還要驗證您的javascript插件不會更改大小或更改類（例如，使用Google Chrome的開發人員工具）。如果它仍然無法正常工作，請張貼您的代碼，我們可以輕鬆地進行調試。 ;）

來源

2013-11-21 09:50:34

請檢查小提琴http://jsfiddle.net/ 7gwz5/ – Anish

請參閱更新提琴的寬度值popover：http：//jsfiddle.net/7gwz5/1/ –

:) css技巧。謝謝你的回覆，但彈出窗口仍然顯示在完整壓光區下方是否有可能查看外部？ – Anish

此

得到了解決剛剛添加{container:'body'}到事件彈出過和它的工作很大

element.popover({ 
       title: "My Title", 
       placement:'auto', 
       html:true, 
       trigger : 'click', 
       animation : 'true', 
       content: event.msg, 
       container:'body' 
      });

更新的JSLint http://jsfiddle.net/7gwz5/2/

來源

2013-11-21 10:50:00 Anish

bootstrap jquery彈出窗口大小

回答

相關問題