angular2 + popup + validations

Question

我的表格来自第三方（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。

点击SIGN ME UP TODAY按钮：
http://www.hedaro.com

Answer 1

Upto my understanding you want to open a modal in angular2 onto which you want to perfrom some actions like login etc. here is code for you with working modal with validation in the angular2. using bootstrap modal.

angular2 + popup + validations

<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>

working demo:

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

hope it may help you !

Answer 2

<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;
}

Answer 3

Simple, easy, intuitive.

jQuery UI Dialog - 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>

如何在表单提交上创建弹出窗口

3 个答案:

angular2 + popup + validations