DotNetNuke Modal PopUps

Task 1, create a jQuery UI dialog to confirm a postback action invoked by a ASP.NET button control. In your module’s ascx file, add a button control and a div to contain you dialog.

<asp:Button ID="btnDelete" runat="server"

<div id="dlgDeleteConfirm" title="Confirm">
	<div class="confirmDialog">Are you sure you want to delete this?</div>

In you ascx code behind, create a method to create a client script block, you call can call on page load. This modular approach of passing server vars to the client is one I like the best. With this method you can modify the code to pass in arguments and also include them when writing your script block, etc..

private void Page_Load(object sender, System.EventArgs e)

private void ClientScriptBlock()
	Type csType = this.GetType();
	ClientScriptManager cs = Page.ClientScript;
	if (!cs.IsStartupScriptRegistered(csType, "Vars"))
		StringBuilder sb = new StringBuilder();
		cs.RegisterClientScriptBlock(csType, "Vars", sb.ToString());

protected void btnDelete_Click(object sender, EventArgs e)
 //delete method followed by redirect or whatever on success
.confirmDialog {
	padding: 15px 15px 0 15px;
	font-weight: bold;

jQuery – I had trouble getting .dnnConfirm to handle the postback with it’s isButton option, so I used a standard jQuery UI Dialog instead.

jQuery(document).ready(function ($) {
		autoOpen: false,
		modal: true,
		width: 300,
		height: 140,
		resizable: false,
		dialogClass: "dnnFormPopup",
		buttons: {
			"Yes": function() {<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnDelete))%>;},
			"No": function() {$(this).dialog('close');}
	$("#" + btnDelete_ClientID).click(function () {
		$("#dlgDeleteConfirm").dialog('open'); return false;

NOTE: You need to make sure that DNN loads the jQuery UI in either OnInit or OnLoad in your Module Controls code behind.

protected override void OnLoad(EventArgs e)

    //register jQuery-UI - no need to register jQuery
    //since jQuery-UI registration method will handle this 

Task 2, create a jQuery UI dialog to contain an Edit form


Published by

Jim Frenette

Web Developer - views here are my own except those taken from people more clever than me.