2017-02-06 10 views
0

ボタンのCSSとOneSignalのサブスクリプションjavascriptのコードがあります。プレーンなjavascriptはテキストをリンクとして表示するだけですが、代わりにボタンを作成したいのですが、コードにCSSを挿入しようとすると、テキストのハイライトのように見えるので、クリックするのが難しくなりますテキストの上部にのみクリック可能)。OneSignalサブスクリプションリンク(JavaScript)をボタンにするにはどうすればよいですか?

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コードでは、目の上にCSSを配置する他の方法は

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

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

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

 
} 
 
</style> 
 
</head>

ありさ電子コード?純粋なテキストの代わりにボタンを表示する必要があります。前もって感謝します。

答えて

0

私はid = 'subscribe-link'でhtmlボタンを定義してタグを削除できると思います。

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

EDIT(スクリーンショットを追加):

enter image description here

+0

それはそれでテキストのない白い長方形になって、クリックされたとき、それは何もしない...私は何か間違ったことをやっていますか?私はちょうどhrefの部分を置き換えました。 –

+0

私はタイプミスがあります。一方、OneSignalを既に初期化していますか? –

+0

はい、私はページ内にベルアイコンを作成するコードを持っています。ボタンに入れたいコードは購読するための余分なオプションです。ブログの投稿フッタとして設定します。 CSSなしで正常に動作します –

関連する問題