小程式video元件層級太高如何解決

小程式首頁用了一個video元件，然後modal元件的懸浮窗就被這個video覆蓋了，因為原生元件的層級太高，用z-index是沒有辦法解決的。

以下是我剛開始寫的程式碼，不管怎麼設定z-index，視訊總在懸浮層上面。

	<view>
	   	<modal title="請選擇" cancel-text="取消" confirm-text="確定" hidden="{{mHidden}}"    bindcancel="cancel" bindconfirm="confirm">
	    	<text>這裡面寫懸浮層要展示的內容</text>
	   	</modal>
	</view>
	<view class="myVideo">
	    	<video id="myVideo" src="{{video_url}}"></video>
	</view>
 

這裡使用cover-view是不行的，因為cover-view元件內只能包含cover-view，cover-image，button元件，所以顯然，擁有modal和text元件在其內部就不行，如果用了，那麼在開發者工具裡面是可以顯示的，但是手機上就不顯示懸浮層了。

所以不能用modal元件來實現，我們就只能用cover-view元件自己來寫了，這裡通過介面檔案返回的mHidden值（true或false）來決定懸浮層的顯示和隱藏：

<cover-view class='Toast_bj' hidden='{{mHidden}}'></cover-view>
<cover-view class="myToast" hidden="{{mHidden}}">
  		<cover-view>這裡面寫懸浮層要展示的內容</cover-view>
  		<cover-view class="cancel button" bindtap="cancel">取消</cover-view>
  		<cover-view class="confirm button" bindtap="confirm">確定</cover-view>
</cover-view>
<view class="myVideo">
	    <video id="myVideo" src="{{video_url}}"></video>
</view>
 

注意：class='Toast_bj’這個是懸浮層的蒙版，必須放在懸浮層class="myToast"前面的位置，因為cover-view元件由先後順序決定層級，越靠後的cover-view元件層級越高，如果把蒙版放在懸浮層後面，那麼懸浮層的按鈕就失效了，所以要放懸浮層前面。

懸浮層裡面的按鈕也用cover-view元件來寫，用bindtap元件繫結事件。

懸浮層有樣式的話可以在wxss裡面寫，但是要注意cover-view元件只支援基本的定位，佈局，文字樣式，不支援一些css屬性，比如：border，background-image，shadow，overflow，visible等。

如果使用modal的，也可以在modal顯示的時候隱藏video，modal隱藏的時候再顯示video，這個可以根據專案需求而定。