如何使用嵌入式javascript在第三方网站上创建弹出窗口？

时间：2020-11-27 18:48:41

I'm creating a popup script that allows users to show a popup on their website (similar to SumoMe or OptinMonster).

我正在创建一个弹出脚本,允许用户在他们的网站上显示弹出窗口(类似于SumoMe或OptinMonster)。

What I'm missing is how do I get the popup to work on an external website?

我缺少的是如何让弹出窗口在外部网站上运行?

Currently I know how to implement it on my own site, but it requires several lines of code, namely I need to have a DIV that contains my popup code (look at div id = popup below). Then I'm using Jquery to actually make the popup open up.

目前我知道如何在我自己的网站上实现它,但它需要几行代码,即我需要一个包含我的弹出代码的DIV(请看下面的div id = popup)。然后我正在使用Jquery来实际打开弹出窗口。

You can see an example of what I'm trying to do here: http://vyper.io/7-ecommerce-growth-hacks/

你可以看到我在这里尝试做的一个例子:http://vyper.io/7-ecommerce-growth-hacks/

(Click the yellow button to see).

(单击黄色按钮查看)。

I'm trying to come up with an approach that works with ONE embedded javascript similar to how the other companies are doing it. So basically the page would include a

我正在尝试提出一种方法,该方法适用于一个嵌入式javascript,类似于其他公司的做法。所以基本上页面会包含一个

<script src="popup.js"></script>

and then link to the popup like

然后链接到弹出窗口

<a href="" class="popup>Click here to open the popup!</a>

I hope I'm being clear. How should I approach this problem and what should I be looking at?

我希望我很清楚。我应该如何处理这个问题以及我应该注意什么?

1 个解决方案

#1

0  

You can loop through all elements that have a specific class, for example 'popup' and add the popup functionality to those one by one:

您可以循环遍历具有特定类的所有元素,例如“弹出”并逐个添加弹出功能:

var popups = document.getElementsByClassName('popup');

for (var i = 0; i < popups.length; i++) {
    popups[i].addEventListener('click', function() {
        // Add functionality here
    });
}

JSFiddle

#1

0  

You can loop through all elements that have a specific class, for example 'popup' and add the popup functionality to those one by one:

您可以循环遍历具有特定类的所有元素,例如“弹出”并逐个添加弹出功能:

var popups = document.getElementsByClassName('popup');

for (var i = 0; i < popups.length; i++) {
    popups[i].addEventListener('click', function() {
        // Add functionality here
    });
}

JSFiddle

标签：

相关文章