CODEWITHSUNDEEP
jquerymodal-dialogoverlay
user3581934
user3581934

Reputation: 17

jquery modal overlay on parent div only

I have 2 tabs and 2 tabs contents. I have a button on each tab to open a jquery dialog I want to make sure when i open dialog 1 i can still navigate to Tab2 without closing dialog I included my code sample JSFiddle

enter code here


$("#tabs").tabs({
    activate: function (event, ui) {
        var active = $('#tabs').tabs('option', 'active');
        $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

    }
}

);
$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog-message').dialog('open');
        return false;
    });
});
$("#dialog-message").dialog({
    modal: true,
    autoOpen: false,
    draggable: true,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    position: {
			"my": "right top+20",
			"at": "left top",
			"of": $("#form1")
		},
    buttons: {
       
        "Close": function () {

				
				$(this).dialog("close");

			}
    }
});
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
   
    </ul>
    <div id="tabs-1">
        <div id="form1">
            The dialog should start from here letting the abbility to go to Tab2. The nodal should only cover this content:
           <h1> Content for Tab 1</h1>
            <button id="dialog_link" type="button">Click Me!</button>
            <H1>This is some content</H1>
              <H1>This is some content</H1>
              <H1>This is some content</H1>
        </div>
    </div>
    <div id="tabs-2">
        <div id="form2">Content for Tab 2
          <H1>This is some content tab2</H1>
             <H1>This is some content tab2</H1>
             <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1> <H1>This is some content tab2</H1>
        </div>
    </div>   
</div>
<div id="dialog-message" title="Important information" style="overflow: hidden;">
 
    <p style="margin-left: 23px;">
      I am popup for form1 Tab1
</p>
    </div>
<div id="tabid"></div>

Upvotes: 0

Views: 719

Answers (1)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You need to hide the modal backdrop. Add this in your CSS, although I am not sure what you are trying to do:

.ui-widget-overlay{
    display:none;
}

Working fiddle: http://jsfiddle.net/sandenay/CnEUh/2054/

Upvotes: 1

Related Questions