fancybox邊框 - 兩種顏色

我有窗體，並通過ajax發送數據到php文件並獲得結果。 0和1fancybox邊框 - 兩種顏色

如果我得到0的結果，我想喜歡展示紅色的fancybox（機身和邊框）如果我得到1，顯示綠色的fancybox（機身和邊框）

確定 - 我在CSS定義的樣式：

<style type="text/css"> 
    #green { 
     background-color: #bef781; 
    } 
    #red { 
     background-color: #f5a9a9; 
    } 
    #fancybox-content #red { 
     border: 10px solid #f5a9a9 !important; 
     background-color: #f5a9a9; 
    } 
</style>

，重視他們從阿賈克斯迴應的div：

$.ajax(
{ 
    url : formURL, 
    type: "POST", 
    data : postData, 
    success: function(response) 
    { 
     if (response == "1") { 
      $.fancybox("<div id=\"green\";><h1>Green response</h1></div>"); 
     } 
     else { 
      $.fancybox("<div id=\"red\";><h1>Red response</h1></div>"); 
     } 
    } 
}

兩個框都呈現如預期，但問題是有邊界 - 在CSS我可以改變默認的白色像這樣：

#fancybox-content { 
     border: 30px solid #bef781 !important; 
}

，它的工作，但只有一個箱（綠色或紅色） - 如何在第二個框更改邊界？

問候

來源

2014-09-02 user1908583

是什麼版本？ – JFK 2014-09-02 23:01:05

嗨fancybox版本1.3.4 – user1908583 2014-09-02 23:06:42

裏面你的Ajax success功能，你可以操縱兩者的內容和的fancybox內使用switch聲明變量的顏色。然後應用使用onStart（的fancybox v1.3.x）回調的設置，如：

success: function(response) { 
    var _textResponse, _color; 
    switch (response) { 
     case 1: 
      _textResponse = "<div id=\"green\"><h1>Green response</h1></div>", 
      _color = "green"; 
      break; 
     case 2: 
      _textResponse = "<div id=\"red\"><h1>Red response</h1></div>", 
      _color = "red"; 
      break; 
     default: 
      break; 
    }; 
    $.fancybox(_textResponse, { 
     padding: 30, // instead of border-width 
     onStart: function() { 
      $("#fancybox-content").css({ 
       backgroundColor: _color, 
       borderColor: _color, 
       boderStyle: "solid" 
      }); 
     } 
    }); 
}

見JSFIDDLE（它模擬數字Ajax響應在上面的代碼可以用一個變量玩different response）

注意我不添加額外的CSS，但通過的jQuery的fancybox的

來源

2014-09-02 23:39:51 JFK

優秀 - 完美無缺的工作:)謝謝你 – user1908583 2014-09-03 08:15:06

如果我們假設第一的fancybox是紅色的，而接下來的fancybox是綠色的，那麼你可以使用CSS :first-child選擇。

#fancybox-content:first-child { 
    border: 30px solid #f5a9a9 !important; 
} 

#fancybox-content:nth-child(2) { 
    border: 30px solid #bef781 !important; 
}

來源

2014-09-02 19:54:27

哦，等等，你的意思是你想風格的＃fancybox內容，而不是＃紅色的內容？然後你必須選擇'＃red'的父元素（和'＃green'）。你必須爲此使用JavaScript。請參閱：http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – 2014-09-02 20:02:52

嗨Kristoffer，謝謝你的回答，我增加了我的代碼更多的第一篇文章。當我添加＃fancybox-content #red時，我仍然在框中獲得白色邊框，但是如果將其更改爲＃fancybox-content（沒有#red），那麼該框是全紅的 - 如何獲得完整的綠色框？ – user1908583 2014-09-02 20:28:07

如果我們假設第一個fancybox是紅色的，而下一個fancybox是綠色的，那麼你可以使用CSS'：first-child'選擇器。我已經更新了答案。 – 2014-09-02 20:34:11

fancybox邊框 - 兩種顏色

回答

相關問題