iT邦幫忙

0

幾個前端的實作問題

https://www.lativ.com.tw/
目前在練習實作lativ官網的一些功能
碰上了幾個問題
1.右上角的會員登入
2.一樣右上角的購物車
會員登入那邊想一樣點擊跑出視窗
我看他好像是用iframe做的,可是我一直不太懂要怎麼做,
我的想法是iframe display先none click的時候在出現
可是出現的位置 和背景變灰 完全沒概念
而購物車那邊 用jquery slideup slidedown 一直被下方圖片擋住
調過z-index也沒作用

有大大能稍微提點一下嗎

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
小魚
iT邦大師 1 級 ‧ 2017-12-16 07:42:58

z-index有調整到重點嗎?
通常套件出來的結果,
id跟class都已經不一樣了,
(通常改的會是class)
你要改的是改完之後的id或class,
不是你寫的網頁裡的id或class,
或甚至可能要改的不是你原本看到的那個標籤(div?)

有可能是套件自己產生的標籤才是你要去改的,
之前也遇到類似的情況一直改不好,
後來才發現沒有改到重點,
找到重點之後就成功改好了 :)
如果是用chrome的話,
可以善用F12開發人員工具來觀察,
其他瀏覽器應該也有提供這樣的功能。
改完以後你會對前端更瞭解。

1
not
iT邦新手 4 級 ‧ 2017-12-16 08:47:41

會員登入跳出來的不是iframe

可以參考bootstrap的modal效果
http://bootstrap.hexschool.com/docs/4.0/components/modal/
圖片類也可以參考lightbox效果
http://lokeshdhakar.com/projects/lightbox2/

slidedown擋住改zindex沒用的話,檢查一下有沒有加position:absolute吧

建議還是用https://codepen.io/ 把code貼出來,比較方便討論

modal做出來了!!感謝大大的提點!!
可是又有另外的問題跑出來了...
我的slide現在完全掛掉
流覽器F12 顯示
Uncaught TypeError: $(...).slideUp is not a function
......
是因為我用了這些嗎

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

原本是用 google的

<script	src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

怎麼會這樣><

0
炎之虛空
iT邦高手 3 級 ‧ 2017-12-18 09:19:58

他主要是套 http://fancybox.net
這個套件產生的效果....

我要發表回答

立即登入回答