У меня есть форма, которая поступает от третьей стороны (mailchimp/mailerlite). Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на кнопку, она открывает форму в новом окне. Я хочу, чтобы он всплывал, а не открывал новое окно. Может ли кто-нибудь дать мне несколько указателей?Как создать всплывающее окно на форме submit

ФОРМА

<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 СЕГОДНЯ кнопка:
http://www.hedaro.com

источник

2016-03-04 DataByDavid

, почему не использовать самозагрузки-модальным за то же самое с помощью 'данных-переключатель = 'modal''? –

Если бы я создал свою собственную форму, тогда да, я бы попробовал модальный. Проблема в том, что код, который я предоставил, поступает от третьего лица, и я просто пытаюсь настроить его, чтобы получить желаемый результат. – DataByDavid

, так что я думаю, что вы можете предоставить этот код динамически в модальный is't it? –

<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-04 17:46:35 Singleton

вместо этого, почему бы не использовать bootstrap-modal (popup)? –

Это была бы отличная идея, но меньше кода imo, тем лучше. – Singleton

Да, но зачем использовать пользовательский внешний css, когда есть средство, предоставляемое bootstrap. –

Upto мое понимание вы хотите открыть модальное в angular2, на который вы хотите какие-то действия выполнение проектно как логин и т.д. здесь код для вас работает модальный с проверкой в angular2. используя bootstrap modal.

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-04 18:06:51

Простой, легкий, интуитивно понятный.

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-04 18:18:32 thismethod

Как создать всплывающее окно на форме submit

ответ

angular2 + Всплывающие + валидация

Смежные вопросы