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>

以下は、私が達成しようとしていることの実例です。以下の Web サイトはプレーンな HTML5 を使用して作成されていますが、Angular2 に切り替えようとしています。

[SIGN ME UP TODAY] ボタンをクリックします:
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 に答える