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

Question

我正在尝试通过Magnimic弹出式广场制作一个弹出菜单/模式框。     //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