Once "btnAddSession" button is clicked, the div with the "addproductsForm" ID should open as a modal dialog box. In Firefox it opens properly while in IE it submits the page even with return false;
HTML --------------------------------------- <h3>Products</h3> <!-- Placeholder for ajax results --> <div id="mainproducts"></div> <input type="submit" name="btnAddSession" value="Add Session" id="btnAddSession" /> <!-- Placeholder for the insert form --> <div id="addproductsForm" class="insertForm"> <ul> <li> <label>Product Name:</label> <input name="txtProductName" type="text" id="txtProductName" / > </li> <li> <label>Product Price:</label> <input name="txtProductPrice" type="text" id="txtProductPrice" / > </li> <li> <label> </label> <input type="button" name="btnAddProduct" value="Add Product" id="btnAddProduct"/> </li> </ul> </div> Javascript --------------------------------------------- $(function(){ /* Modal Dialog Box Configuration */ $("#addproductsForm").dialog({ bgiframe: true, autoOpen: false, modal: true, overlay: { "background-color": "#000", "opacity": "0.5", "-moz-opacity": "0.5" }, position: "center", dialogClass: "insertForm", closeable: false }); $("#btnAddSession").click(function(event){ $("#addproductsForm").dialog("open"); //event.preventDefault(); return false; }); });