Here is the modal pop up that opens an aspx page in dialog
$("#dialog_test1").load("Test.aspx", function () {
$(this).dialog({
autoOpen: true,
modal: true,
resizable: false,
draggable:false,
width: 680,
open:function()
{
$('#tabslist').tabs({
create: function (e, ui) {
$('#closeBtn').click(function () {
$('#dialog_test1').dialog('close');
});
}
});
}
});
$(this).siblings('.ui-dialog-titlebar').remove();
$(this).css('height', 'auto');
});
I am trying to remove the title bar and have my close X buttom on top right corner
And that's my tab controls in an ASPX page which opens in dialog
<div id="tabslist">
<ul class="tabs-menu" style="list-style-type: none;" >
<li class="active" style="list-style:none;outline:none; " ><a class="anchor" id="TabInfo" href="#TabInfo" style="text-decoration: none;" >Information</a></li>
<li style="list-style:none;outline:none; "><a class="anchor" id="Tab1" href="#Tab" style="text-decoration: none;">Tabdetails</a></li>
<li class="tabs-close-button"><button id="closeBtn">X</button></li>
</ul>
</div>
What I have tried:
I tried to hide and remove, but none of those work and my cross button is under the title bar. I placed style on cross button z-index but it is under the title bar. Now two bugs are hanging here....
I want the title bar to go away so my cross close button is visible properly.
And also on clicking the Cross button, it throws me an error .tabs()is not a function and it doesn't close the dialog. And I know I am at old version of Jquery 1.6 but how do make my close button click work