完整的浏览器屏幕DIV注入到body元素

Question

已要求我创建一个可应用于任何站点的脚本。我已将Google结果页用作测试。

我想要的是任何站点上的全屏半透明div。用于Cookie通知。

因此我已将其添加到结果页面：      

 <div style="position:absolute; z-index:1;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

“ body”元素结尾之前。

以Google徽标和搜索div为准。我得到... documentation

Answer 1

这是z-index的问题，请使用z-index:200。

<div style="position:absolute; z-index:200;  width:100%; height:100%; margin:0px; left:0px;  opacity:0.5; background-color:blue;"></div>

Answer 2

要使脚本不仅可以在Google上运行，还可以在所有其他网页和任何浏览器上运行，请将class PageSerializer(serializers.ModelSerializer): class Meta: model = Page fields = ('link','text','page_no') def to_internal_value(self, data): link_data = data.get("link") if isinstance(link_data, Link): #if object is received data["link"] = link_data.pk # change to its pk value obj = super(PageSerializer, self).to_internal_value(data) return obj def validate_text(self, value): #some validation is done here. def validate_link(self, value): #some validation is done here. 设置为class BookSerializer(serializers.ModelSerializer): pages = PageSerializer(many=True) class Meta: model = Book fields = ('title','pages') @transaction.atomic def create(self, validated_data): pages_data = validated_data.pop('pages')#pages data of a book book= self.Meta.model.objects.create(**validated_data) for page_data in pages_data: page = Page(book=book) page_serializer = PageSerializer(page, data = page_data) if page_serializer.is_valid(): #PageSerializer does the validation page_serializer.save() else: raise serializers.ValidationError(page_serializer.errors) #throws errors if any return book 。

z-index

这会将div放在DOM中的所有其他元素上。