Click here to Skip to main content
15,881,757 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
Here is the modal pop up that opens an aspx page in dialog
JavaScript
$("#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


HTML
<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
Posted
Updated 29-Jun-16 4:04am
v3
Comments
sudevsu 29-Jun-16 10:10am    
I got it working by adding this in as a jquery script separate. $('#closeBtn').click(function () {
$('#dialog_test1').dialog('close');
}); But I am still stumped why that doesn't work with closing the title bar

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900