Question

我正在尝试使用Semantic UI制作按钮弹出窗口。在their guide之后我制作了一个内联弹出窗口：

＆＃13;

// Button Popups
$('.popup-button').popup({
	inline: true,
	on: 'click',
	position: 'top center'
});

＆＃13;

<button class='ui right floated tiny circular icon button popup-button'><i class='ui share alternate icon'></i></button>
<div class='ui flowing popup'>
	<div class='ui buttons'>
		<button class='ui icon facebook button'><i class='ui icon facebook'></i></button>
		<button class='ui icon google plus button'><i class='ui icon google plus'></i></button>
		<button class='ui icon twitter button'><i class='ui icon twitter'></i></button>
	</div>
</div>

＆＃13;

但按钮不合适。我想按钮作为弹出窗口，没有白色边框或相似。是否可以使用Semantic-UI？

Answer 1

您应指定自定义选择器以帮助将弹出内容链接到其激活器。在此示例中，使用指向弹出按钮的链接初始化流动弹出窗口。

$('.popup-button').popup({
    popup : $('.flowing.popup'),
    on    : 'click'
});

您还可以在激活器元素中将弹出内容指定为数据值属性。

<button class='ui center floated tiny circular icon button popup-button1' data-html="<div class='ui buttons'><button class='ui icon facebook button'><i class='ui icon facebook'></i></button><button class='ui icon google plus button'><i class='ui icon google plus'></i></button><button class='ui icon twitter button'><i class='ui icon twitter'></i></button></div>" ><i class='ui share alternate icon'> </i></button>

以下是FIDDLE

你可以通过删除弹出div的填充来消除白色边框。

语义UI按钮弹出窗口

1 个答案: