Question

如何在链接/按钮点击时触发弹出窗口？我正在使用Sumome页面构建器，我想在链接点击时触发它。我看到它在其他网站上使用过：<button data-sumome-listbuilder-id="idnumber">Join</button> 但由于某些原因，当我插入我的Sumome idnumber时，它不起作用（没有弹出，它只显示一个什么都不做的按钮）这是我尝试过的页面（按钮位于页面末尾） - http://www.travelersuniverse.com/about

Answer 1

当你改变它的id时，也许你的按钮停止工作，因为在前一个id上附加了一个事件监听器（当你更改它时，你必须更新事件监听器脚本）。如果没有一段代码可以检查，很难确定。无论如何，如果你想建立一个新的弹出窗口，而不是编辑当前的弹出窗口：

默认情况下，浏览器会阻止弹出窗口，并需要几秒钟才能加载。最好的选择是使用带position:fixed的模态div，然后使用display:none / display:inline-block

隐藏/显示它

＆＃13;

function show(){
  document.getElementById("zero").style.display = "inline-block";
  document.getElementById("aa").style.display = "inline-block";  
}

function hide() {
  document.getElementById("zero").style.display = "none";
  document.getElementById("aa").style.display = "none";   
}

＆＃13;

body {
  height: 100%;
  background: honeydew;
}

#zero {
  top: 0;
  left: 0;
  position: fixed;
  background: black;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  pointer-events: none;;
}

#aa {  
  font-weight: bold;
  position:fixed;
  left:0;
  right:0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 200px;
  height: auto;
  padding: 15px;  
  background: #fff;
  box-sizing: content-box;
  border: 3px solid black;
}

a, a:visited, a:focus {
  margin-right: 10px;
  color: white;
  background: crimson; 
  padding: 5px;
  border: 3px solid black;
  text-decoration: none;
}

a:active {
  background: darkred;  
}

#text {
  text-align: justify;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

.left {
  float: left;  
}

.right {
  float: right;  
}

＆＃13;

<div id=zero style="display:none"></div>
<div id=text><a href=# target=_self onClick="show()" class=left>click to open</a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilisis elit sed justo. Quisque volutpat malesuada velit.</div>

<div id=aa style="display:none">
<a href=# target_self onClick="hide()" class=right>x</a>
<p>content A</p><p>content B</p><p>content C</p><p>content D</p>
</div>

＆＃13;

无论如何，如果你想要一个真正的弹出窗口，你可以这样做：

HTML

<a href=# target=_self onClick="pop()">click to open</a>

JAVASCRIPT

function pop() { window.open('http://www.example.com','pop',"height=590,width=450,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=yes,copyhistory=no"); }

codepen DEMO

正如您在Javascript行中看到的那样，有几个属性，例如＆＃39; width＆＃39;和＆＃39;身高＆＃39;自定义弹出窗口。

Answer 2

你可以试试javascript。或者快速检查使用这行代码，

<a href="#" onclick = "alert('fine')">test</a>

或者这个，

<button onclick="alert('fine')">Click me</button>

链接点击时触发弹出窗口

2 个答案: