Как вызвать javascript с кнопки динамика c в asp. net? - PullRequest
Новая
       29

Как вызвать javascript с кнопки динамика c в asp. net?

0 голосов
/ 07 мая 2020

Я пытаюсь создать всплывающее меню / модальное окно с помощью Magnifi c popup plagin. 

     //Dynamic button:
     Button btn1 = new Button
                    {
                        Text = "Button1"
                    };
     btn1.Attributes.Add("onClick", "javascript:return openForm();");

How do you think it is possible to write a script like this:

<script type="text/javascript">
       function openForm() {
             $('.popup-with-form').magnificPopup({
                 type: 'inline',
                 focus: '#name'
             });
           } 
   </script>

Или как я могу связать кнопку c с динамиком с этим скриптом? 

 <!-- The Modal -->
<div id="form-popup" class="white-popup mfp-hide">
 <div runat="server" action="#">
 <div><input id="name" class="inputbox" type="text" placeholder="Your name" /></div>
 <div><input id="email" class="inputbox" type="email" placeholder="Your e-mail" /></div>
 <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Your message"></textarea></div>
 <div><input type="submit" value="Send"></div>
 </div>
</div>

И не будет ли это ошибкой, замените форму на div: 

<form action="#">     ----->   <div runat="server" action="#">

1 Ответ

0 голосов
/ 11 мая 2020

РЕДАКТИРОВАТЬ 1

Живая демонстрация: https://stackblitz.com/edit/js-6qdlqt?file=index.html

Попробуйте эти изменения.

Всплывающее окно : 

<div id="form-popup" class="white-popup mfp-hide">
    <div runat="server" action="#">
      <div><input id="name" class="inputbox" type="text" placeholder="Your name" /></div>
      <div><input id="email" class="inputbox" type="email" placeholder="Your e-mail" /></div>
      <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Your message"></textarea></div>
      <div><input type="submit" value="Send"></div>
    </div>
</div>

Стиль всплывающего окна: 

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

Инициализация скрипта: 

$(function () {
  $('#btnOpenPopup').magnificPopup({
    type:'inline',
    closeBtnInside: true
  });
});

Кнопка динамика c: 

  Button btn1 = new Button
      {
        ID = "btnOpenPopup",
        Text = "Button1"
      };
  btn1.Attributes.Add("data-mfp-src", "#form-popup");

Документация подключаемого модуля:

https://dimsemenov.com/plugins/magnific-popup/documentation.html

...