如何从 asp.net 中的动态按钮调用 javascript？

Question

我正在尝试通过 Magnific popup plagin 制作一个弹出 menu/modal 框。

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

或者如何将动态按钮与此脚本相关联？

 <!-- 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="#">

Answer 1

编辑 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
  });
});

动态按钮：

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

插件文档：

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

如何从 asp.net 中的动态按钮调用 javascript？

How to call javascript from dynamic button in asp.net?

javascript

asp.net

dynamic

popup

button