0

我有一个来自第三方的表格（mailchimp/mailerlite）。我遇到的问题是，当我单击按钮时，它会在新窗口中打开表单。我希望它弹出而不是打开一个新窗口。谁能给我一些指示？

形式 

<form ngNoForm id="someid" action="//app.mailerlite.com/webforms/popup/123123" target="_blank">
<div class="button-preview">
<button type="submit" class="ml-subscribe-button gradient-on">SIGN ME UP TODAY</button>
</div>
</form>

除了一些 CSS，我还在我的索引文件中包含了一个 js 脚本。

<script type="text/javascript" src="//static.mailerlite.com/js/w/button.js?v20"></script>

下面是我想要完成的工作示例。请注意，下面的网站是使用纯 HTML5 创建的，但我正在尝试切换到 Angular2。

单击“今天注册我”按钮：
http ://www.hedaro.com

4

3 回答 3

2

据我了解，您想在 angular2 中打开一个模态，您希望在该模态上执行一些操作，如登录等。这里是为您提供在 angular2 中使用验证的工作模态的代码。使用引导模式。

angular2 + 弹出窗口 + 验证

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
        {{demoInfo | json}}
      </div>
      <div class="modal-body">
        <form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
          <div class="col-md-7">
            Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
          </div>
          
          <div class="col-md-7">
            Password:   <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
      </div>
    </div>

  </div>
</div>

工作演示：

http://plnkr.co/edit/07X8LVnI01Ml2vkN0XwI?p=preview

希望它可以帮助你！

于 2016-03-04T18:06:51.550 回答
1 
<form ngNoForm id="someid" action="//app.mailerlite.com/webforms/popup/123123" data-popup="true">
<div class="button-preview">
<button type="submit" class="ml-subscribe-button gradient-on">SIGN ME UP TODAY</button>
</div>
</form> 

// Wait for the document to become ready
$(function() {
    $("a[data-popup]").live('click', function(e) {
        window.open($(this)[0].href);
        // Prevent the link from actually being followed
        e.preventDefault();
    });
});

https://jsfiddle.net/

更新！

这应该可以解决问题。

http://jsfiddle.net/b68Xb/

 <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>



.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
于 2016-03-04T17:46:35.590 回答
0

简单、容易、直观。

jQuery UI 对话框 - http://jqueryui.com/dialog/

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>
于 2016-03-04T18:18:32.353 回答