在 laravel 中创建固定支持按钮
Creating a fixed support button in laravel
我应该在我的主页上创建一个固定按钮。
表示存在一个按钮,单击该按钮时,会在该按钮上方打开一个支持页面!
我在网上看到了一些这样的例子,但是我不能使用它们,我真的很困惑,因为代码是嵌入的并且有复杂的javascript。
我请求您提供资源来解决这个问题。
不需要太复杂,实用又美观即可。
比如按钮是这样的:
页面是这样的:
非常感谢。
您可以通过 bootstrap 模式来完成。在 bootstrap 文档站点上,有一个模态样式设置为在屏幕上居中的示例:http://getbootstrap.com/docs/4.1/components/modal/#vertically-centered.
您可以应用自定义样式,使其显示在屏幕右下方。
结构
<header>
<nav></nav>
</header>
<main></main>
<footer></footer>
<button id="support-modal-launcher" data-toggle="modal" data-target="#support-modal">
Support
</button>
<!-- Modal -->
<div class="modal fade" id="support-modal"></div>
风格
body {
position: relative;
}
footer {
padding: 2rem 0;
margin-top: 3rem;
}
#support-modal-launcher {
position: fixed;
bottom: 2rem;
right: 2.5rem;
}
#support-modal .modal-dialog {
margin-right: 1rem;
display: flex;
align-items: flex-end;
height: calc(100vh - (1.75rem * 2));
}
jsfiddle: http://jsfiddle.net/aq9Laaew/125639/
当然,如果你想创造出和https://small.chat/, https://www.finnlough.com/en/accommodation/bubblehouse, https://www.livechatinc.com/blog/live-chat-customer-experience/ and https://www.leadfeeder.com/一模一样的东西,你需要花时间自己创造风格。
我应该在我的主页上创建一个固定按钮。 表示存在一个按钮,单击该按钮时,会在该按钮上方打开一个支持页面!
我在网上看到了一些这样的例子,但是我不能使用它们,我真的很困惑,因为代码是嵌入的并且有复杂的javascript。
我请求您提供资源来解决这个问题。
不需要太复杂,实用又美观即可。
比如按钮是这样的:
页面是这样的:
非常感谢。
您可以通过 bootstrap 模式来完成。在 bootstrap 文档站点上,有一个模态样式设置为在屏幕上居中的示例:http://getbootstrap.com/docs/4.1/components/modal/#vertically-centered.
您可以应用自定义样式,使其显示在屏幕右下方。
结构
<header>
<nav></nav>
</header>
<main></main>
<footer></footer>
<button id="support-modal-launcher" data-toggle="modal" data-target="#support-modal">
Support
</button>
<!-- Modal -->
<div class="modal fade" id="support-modal"></div>
风格
body {
position: relative;
}
footer {
padding: 2rem 0;
margin-top: 3rem;
}
#support-modal-launcher {
position: fixed;
bottom: 2rem;
right: 2.5rem;
}
#support-modal .modal-dialog {
margin-right: 1rem;
display: flex;
align-items: flex-end;
height: calc(100vh - (1.75rem * 2));
}
jsfiddle: http://jsfiddle.net/aq9Laaew/125639/
当然,如果你想创造出和https://small.chat/, https://www.finnlough.com/en/accommodation/bubblehouse, https://www.livechatinc.com/blog/live-chat-customer-experience/ and https://www.leadfeeder.com/一模一样的东西,你需要花时间自己创造风格。