modalpopupextender 相关问题

ModalPopupExtender是AJAX Control Toolkit for ASP.NET的一部分

我可以使用以下代码显示模式弹出窗口我可以使用以下代码显示模式弹出窗口 <asp:scriptmanager id="ScriptManager1" runat="server"> </asp:scriptmanager> <asp:button id="Button1" runat="server" text="Button" /> <cc1:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="btnCancel" okcontrolid="btnOkay" targetcontrolid="Button1" popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG"> </cc1:modalpopupextender> <asp:panel id="Panel1" style="display: none" runat="server"> <div class="HellowWorldPopup"> <div class="PopupHeader" id="PopupHeader">Header</div> <div class="PopupBody"> <p>This is a simple modal dialog</p> </div> <div class="Controls"> <input id="btnOkay" type="button" value="Done" /> <input id="btnCancel" type="button" value="Cancel" /> </div> </div> </asp:panel> 但是我需要保持页面处于活动状态并让用户继续在页面上进行选择而不关闭模式弹出窗口。这可能吗？感谢任何帮助。我不相信 AJ 工具包中的模式对话框允许这样做。虽然我过去使用过 AJ 工具包中的模式对话框，但随着时间的推移，无法将对话框放置在我想要的屏幕上，这成为了一个问题。使用 AJ Toolkit 弹出窗口的唯一真正好处是无需编写任何 JavaScript。除了不必编写 JavaScript，随着时间的推移，由于附加功能，我转向了 jQuery.UI 对话框。 jQuery.UI 对话框比 AJ Toolkit 对话框工作得更好，甚至比引导对话框工作得更好，并且标记更少。 jQuery.UI 对话框唯一真正的缺点是默认情况下它看起来像 2000 年初网络时代的风格（看起来很差）。但是，通过一些 CSS 工作，结果会很不错。 jQuery.UI 对话框还支持在页面上拖动，比 AJ Toolkit 对话框更好。您的问题是另一个例子，也是为什么使用 jQuery.UI 对话框是更好的选择的原因。 jQuery.UI 对话框具有“modal”= true/false 设置，非常适合这个问题。因此有了这个示例和标记：标记： <asp:Button ID="cmdTest" runat="server" Text="Show my pop up" OnClientClick="showpop(this);return false;" CssClass="btn" /> <br /> <br /> <label>First Name</label> <br /> <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox> <br /> <br /> <label>LastName Name</label> <br /> <asp:TextBox ID="txtLast" runat="server"></asp:TextBox> <br /> <br /> <label>Hotel Name</label> <br /> <asp:TextBox ID="txtHotelName" runat="server"></asp:TextBox> <div id="mypopdiv" style="display:none;padding:20px" > <h3>My Test popup area</h3> <label>My Notes Area</label> <br /> <br /> <asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" Height="139px" Width="354px" ></asp:TextBox> </div> <script> function showpop(btn) { myDialog = $("#mypopdiv") myDialog.dialog({ title: "Page notes", sizable: true, appendTo: "form", width: "400", modal: false, dialogClass: "dialogWithDropShadow", position: { my: 'left top', at: 'right bottom', of: btn }, buttons: { Close: function () { myDialog.dialog('close'); } } }) } </script> 结果是这样的：请注意我如何自由打开、关闭、在对话框中移动，以及如何自由编辑弹出窗口中的文本，或编辑+使用现有页面上的任何其他控件。编辑：通过 CDN 的 jQuery 和 jQuery.UI 因此，引用 jQuery 和 jQuery.UI，因此： <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" ></script> <style type="text/css"> .dialogshadow { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } </style> 然后你的 .dialog 调用看起来像这样： <script> function showpop(btn) { myDialog = $("#mypopdiv") myDialog.dialog({ title: "Page notes", sizable: true, appendTo: "form", width: "400", modal: false, dialogClass: 'dialogshadow', position: { my: 'left top', at: 'right bottom', of: btn }, buttons: { Close: function () { myDialog.dialog('close'); } } }) } </script> 现在，我更喜欢这个影子类，并且是我在这段代码中使用的影子类： <style> .dialogWithDropShadow { -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); border-radius: 10px; } .dialogWithDropShadow .ui-dialog-titlebar { background: white; border: none; border-bottom: 1px solid #ccc; } .dialogWithDropShadow .ui-dialog-titlebar-close { display: none } </style> 以上结果是这样的：所以，我“隐藏”“x”以关闭右上角。如果你删除这个： .dialogWithDropShadow .ui-dialog-titlebar-close { display: none } 然后你会得到这个：我可以通过以下链接实现我的目标。谢谢你 https://www.aspdotnet-suresh.com/2013/10/jquery-floating-div-on-page-scroll.html

c# asp.net ajax modalpopupextender

回答 2 投票 0

ASP.NET：在 ModalPopupExtender 显示后保持页面解锁

c# asp.net ajax modalpopupextender

回答 1 投票 0

RequiredFieldValidator来提示ModalPopupExtender。

我在一个页面上有一堆RequiredFieldValidators，我想让ErrorMessage=""显示在ModalPopupExtender中，而不是在页面上。因此，当他们点击提交时，一个文本框没有 ...

c# asp.net modalpopupextender requiredfieldvalidator

回答 2 投票 1

AjaxControlToolKit ModalPopupExtender将捕捉拖动回中心

我使用的是AjaxControlToolKit 4.0（ASP.NET 4.0）的ModalPopupExtender，一切正常，当我拖动ModalPopup时，它正在拖动，但是问题是它正在恢复到其原始的...

ajaxcontroltoolkit asp.net-4.0 drag modalpopupextender