滑出面板附加到DIV

Question

我试图创建一个滑出面板附加到页面的页眉和页脚内的容器div。我使用Bootstrap进行响应，所以解决方案应该理想地与包中包含的媒体查询一起工作。我对如何解决这个问题感到茫然，因为我尝试过的所有东西似乎都无法以某种方式工作。

这张照片动画最好的就是我试图完成（对不起不是设计师）： http://d.pr/i/DzQc+

我已经试过：

Pageslide - 这是最接近的解决方案我至今已发现。这会将滑出式面板附加到正文。因此，它不允许我继续滑出面板页的页眉/页脚容器内：http://srobbin.com/jquery-plugins/pageslide/

jQuery Mobile的面板构件 - 我试图破解和重新利用jQuery Mobile的面板插件插件的功能根据需要，没有任何运气。

.append功能 - 我试图给.append函数设置动画，但是这不适用于bootstrap的响应函数。

说了这么多，你们中的任何一个人都对插件，功能或实现有什么建议吗？我不一定在寻找一段代码，而是在寻找一个能够像我希望的那样工作的方向。

谢谢！

Answer 1

这里是一个弹出式容器，我建立的原型可以创建到任何div。 CSS起来样式根据自己的喜好

用途：

InfoPopup.Create('YourDivID'); 
InfoPopup.Destroy(); 
InfoPopup.Bounce(); 
$(InfoPopup.YesBtn).fadeIn(); 
$(InfoPopup.NoBtn).fadeIn(); 
$(InfoPopup.ShowBtn).fadeIn(); 

等...

InfoPopup = { 
YesBtn:'', 
NoBtn:'', 
ShowBtn:'', 
IdlBtn:'', 
HintText:'', 
Create:function(target, contentId){ 

    var infoImage = ""; 
    var infoWrapperDiv = document.createElement('div'); 
    infoWrapperDiv.id = 'infoWrapperDiv'; 
    //min-max button 
    var minMax = document.createElement('img'); 
    minMax.src = "images/minimize.png" 
    minMax.id = 'infoPopupMinMax'; 
    minMax.setAttribute('onClick','InfoPopup.Shrink();'); 
    infoWrapperDiv.appendChild(minMax); 
    //content 
    var contentDiv = document.createElement('div'); 
    contentDiv.id = 'infoPopupContent'; 
    contentDiv.innerHTML = '<span>Some Stuff Here</span>' 
    infoWrapperDiv.appendChild(contentDiv); 
    //YesNoButtons - append to infoWrapperDiv if needed in specific activity 
    //---- set custom onClick for the specific Activity in the switch 
    this.YesBtn = document.createElement('input'); 
    this.YesBtn.id = 'infoBtnYes'; 
    this.YesBtn.setAttribute('value','Yes'); 
    this.YesBtn.setAttribute('type','button'); 
    this.YesBtn.className = 'inputButton'; 

    this.NoBtn = document.createElement('input'); 
    this.NoBtn.id = 'infoBtnNo'; 
    this.NoBtn.setAttribute('value','No'); 
    this.NoBtn.setAttribute('type','button'); 
    this.NoBtn.className = 'inputButton'; 

    this.ShowBtn = document.createElement('input'); 
    this.ShowBtn.id = 'infoBtnShow'; 
    this.ShowBtn.setAttribute('type','button'); 
    this.ShowBtn.setAttribute('value','Show'); 

    this.IdlBtn = document.createElement('input'); 
    this.IdlBtn.setAttribute('type','button'); 

    this.HintText = document.createElement('div'); 
    this.HintText.className = 'infoPopupHint'; 



    switch(contentId){//Remove switch to just set up the content 
     case 1://on a 1 page web app the activity will dictate what content is presented 
      this.YesBtn.setAttribute('onClick','currentActivityObject.SaveVerification(1);'); 
      this.NoBtn.setAttribute('onClick','currentActivityObject.SaveVerification(0);'); 
      this.YesBtn.style.display = 'none'; 
      this.NoBtn.style.display = 'none'; 
      infoWrapperDiv.appendChild(this.YesBtn); 
      infoWrapperDiv.appendChild(this.NoBtn); 
      this.ShowBtn.setAttribute('onmousedown',"currentActivityObject.ShowAnswer(1);"); 
      this.ShowBtn.setAttribute('onmouseup',"currentActivityObject.ShowAnswer(0);"); 
      this.ShowBtn.className = 'inputButton infoBottomLeft'; 
      this.ShowBtn.style.display = 'none'; 
      infoWrapperDiv.appendChild(this.ShowBtn); 
      break; 
     case 2: 
      break; 
    } 
    infoWrapperDiv.appendChild(this.HintText); 
    $id(target).appendChild(infoWrapperDiv); 

    $('#infoWrapperDiv').animate({top:"78%"},'fast').animate({top:"80%"},'fast'); 
}, 
Shrink:function(){ 

    $('#infoWrapperDiv').animate({top:"90%"},'fast').animate({top:"88%"},'fast'); 
    var minMax = document.getElementById('infoPopupMinMax'); 
    minMax.setAttribute('onClick','InfoPopup.Grow();') 
}, 
Grow:function(){ 

    $('#infoWrapperDiv').animate({top:"78%"},'fast').animate({top:"80%"},'fast'); 
    var minMax = document.getElementById('infoPopupMinMax'); 
    minMax.setAttribute('onClick','InfoPopup.Shrink();') 
}, 
Bounce:function(){ 

$('#infoWrapperDiv') 
    .animate({top:"90%"},'fast') 
    .animate({top:"80%"},'fast'); 

}, 
Destroy:function(){ 

    var infoWrapperDiv = $id('infoWrapperDiv'); 
    if(infoWrapperDiv){ 
     infoWrapperDiv.parentNode.removeChild($id('infoWrapperDiv')); 
    } 
} 
};