如何将OneSignal订阅链接(javascript)转换为按钮?

时间:2017-02-06 15:52:53

标签: javascript html css button onesignal

我有按钮的CSS代码和OneSignal的订阅javascript。简单的javascript只是将文本显示为一个链接,而我想创建一个按钮,但是当我尝试将CS​​S放在代码上时,它似乎就像是文本中的一个亮点而变得很难点击它(它是只能在文本顶部点击。)

OneSignal代码是

<body>
<a href="#" id="subscribe-link" style="display: none;">Click here to subscribe</a>
    <script>
        function subscribe() {
            OneSignal.push(["registerForPushNotifications"]);
            event.preventDefault();
        }

        var OneSignal = OneSignal || [];
        /* This example assumes you've already initialized OneSignal */
        OneSignal.push(function() {
            // If we're on an unsupported browser, do nothing
            if (!OneSignal.isPushNotificationsSupported()) {
                return;
            }
            OneSignal.isPushNotificationsEnabled(function(isEnabled) {
                if (isEnabled) {
                    // The user is subscribed to notifications
                    // Don't show anything
                } else {
                    document.getElementById("subscribe-link").addEventListener('click', subscribe);
                    document.getElementById("subscribe-link").style.display = '';
                }
            });
        });
    </script>
</body>

我的CSS代码是

<head>
 <style type="text/css">
.subscribe-link {
    background: #F76A0C; 
    width: 200px; 
    text-align: center; 
	float:right
}

.subscribe-link a {
    color: #fff; 
    display:block;
    padding: 13px 0px;
	
}

.subscribe-link a:hover {
    color: #fff;
    background: #FA9450; 

}
</style>
</head>

还有其他方法将CSS放在代码上吗?我真的需要显示一个按钮而不是纯文本。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我相信您可以使用id =&#39; subscribe-link&#39;来定义html按钮。并删除标签。

<button id="subscribe-link" type="button">Click Me</button>

编辑(添加屏幕截图):

enter image description here