How to show dark screen behind modal

I am using bootstrap and have the following code to create a modal window.  However the back ground page doesn't not get dark, and I can click page to remove modal.  I would like to have page dark, and have to make a choice on modal before continuing.

Here is my html now.

     <div id="dvPasswordModal" class="modal fade  " role="dialog" >
      
         <div class="modal-dialog">



             <div class=" modal-backdrop">
             <div class="modal-content ">
                
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="false">Close</button>
            <h3>Forgot Your Password?</h3>
        </div>
        
        <div class="modal-body">
                    <div id="ForgotPasswordBody" >
                        <p>
                            Please enter the email address you used when you registered, then click Get New Password.  We'll send you an email message containing a code to change your password.
                        </p>
                        <div class="row">

                            <fieldset>
                                <div class=" text-center">
                                    <asp:Label runat="server" class="control-label" for="txtForgotEmail">
                                               Email Address:</asp:Label>
                                    <asp:TextBox runat="server" AutoCompleteType="Disabled" class="input-large" name="User-Name" ID="txtForgotEmail"
                                        MaxLength="255" ValidationGroup="ForgotPassword"></asp:TextBox>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtforgotEmail" ValidationGroup="ForgotPassword"
                                        ErrorMessage="Invalid email address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ccsclass="text-danger">*</asp:RegularExpressionValidator>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidato5" runat="server" ErrorMessage="Email is required"
                                        ControlToValidate="txtForgotEmail" Text="*" ForeColor="Red" ValidationGroup="ForgotPassword"> </asp:RequiredFieldValidator>
                                    <span></span>
                                </div>
                                <asp:ValidationSummary runat="server" ShowMessageBox="true" ValidationGroup="ForgotPassword" ShowSummary="false" />


                            </fieldset>


                        </div>

                        <div class="row">
                            <p>
                                 
                            </p>
                            <div class="text-center">
                                <asp:Button runat="server" CssClass="btn btn-success" Text="Submit" ValidationGroup="ForgotPassword" />


                            </div>
                        </div>


                    </div>
            
            
          </div></div></div></div>

    </div>

Open in new window

mgmhicksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
Use dialog "modal" mode (modal:true). See an example at: https://jsfiddle.net/FranIg/5r5ojtkk/

Also you can generate a standard "Close" button instead of creating your own button.

  $(function() {
    $( "#dvPasswordModal" ).dialog({
      modal: true,
      buttons: {
        "Close" : function() {
          $( this ).dialog( "close" );
          
        }
      }
    });
  });

Open in new window

Julian HansenCommented:
Nothing wrong with the code. Sample code below works fine working copy here
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="container">
  <h4>Opening a Bootstrap Modal</h4>
  <h5>Author: Julian Hansen</h5>
  <p>Click button below to open modal</p>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dvPasswordModal">Open Modal</button>
  <div id="dvPasswordModal" class="modal fade  " role="dialog" >
    <div class="modal-dialog">
      <div class=" modal-backdrop">
        <div class="modal-content ">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="false">Close</button>
            <h3>Forgot Your Password?</h3>
          </div>
          <div class="modal-body">
            <div id="ForgotPasswordBody" >
              <p>
              Please enter the email address you used when you registered, then click Get New Password.  We'll send you an email message containing a code to change your password.
              </p>
              <div class="row">
                <fieldset>
                  <div class=" text-center">
                    <asp:Label runat="server" class="control-label" for="txtForgotEmail">
                    Email Address:</asp:Label>
                    <asp:TextBox runat="server" AutoCompleteType="Disabled" class="input-large" name="User-Name" ID="txtForgotEmail"
                    MaxLength="255" ValidationGroup="ForgotPassword"></asp:TextBox>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtforgotEmail" ValidationGroup="ForgotPassword"
                    ErrorMessage="Invalid email address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ccsclass="text-danger">*</asp:RegularExpressionValidator>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidato5" runat="server" ErrorMessage="Email is required"
                    ControlToValidate="txtForgotEmail" Text="*" ForeColor="Red" ValidationGroup="ForgotPassword"> </asp:RequiredFieldValidator>
                    <span></span>
                  </div>
                  <asp:ValidationSummary runat="server" ShowMessageBox="true" ValidationGroup="ForgotPassword" ShowSummary="false" />
                </fieldset>
              </div>
              <div class="row">
                <p>&nbsp;</p>
                <div class="text-center">
                  <asp:Button runat="server" CssClass="btn btn-success" Text="Submit" ValidationGroup="ForgotPassword" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script>
</script>
</body>
</html>

Open in new window

mgmhicksAuthor Commented:
what class is supposed to do that.  Cause I see it working on your example, but not in my program.  Could something on Master Page be prohibiting it from going dark?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
Bit of an open ended question "Doctor: I am in pain what could be the matter"

If we could see the page in action - or failing that the source (not the .Net / ASPX source - the browser source - rendered HTML) it might shed some light.

the first thing I looked for was a <div> not being closed or a script error - neither of those were present in the code you posted but that does not mean they do not exist on the page.

If we can replicate it / see it we can solve it - otherwise we are just guessing.
F IgorDeveloperCommented:
Arre you using a local jquery-ui.js. Are you missing some resources associated with it (images) or using a older version? When you open a dialog in modal mode, the modal dialog is placed over a DIV with a semi-transparent image from the jquery-ui image resources.  

Also could help posting your code to open the dialog.
mgmhicksAuthor Commented:
Here is the code with the modal open.  and a picture.

thanks

<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
	Log in - TAG Collection Payments
</title><link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
    

    <script src="../scripts/jquery-1.11.2.js"></script>
    <script src="../scripts/jquery-ui-1.11.4.js"></script>
   
    <script src="../scripts/bootbox.min.js"></script>
    <script src="../Scripts/modernizr-2.8.3.js"></script>
     <script src="../Scripts/jquery.watermark.js"></script>
     <script src='https://www.google.com/recaptcha/api.js'></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.formatCurrency-1.4.0.min.js"></script>
    <script type ="text/javascript" src="../scripts/datepicker/js/bootstrap-datepicker.js"></script>
    
    <link href="../Content/bootstrap.css" rel="stylesheet" media="screen" /><link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.theme.min.css" /><link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.css" /><link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.structure.css" /><link rel="stylesheet" href="../content/site.css" /><link rel="stylesheet" href="../Content/SiteSupplement.css" /><link rel="stylesheet" href="../scripts/datepicker/css/datepicker.css" />
   

    <style type="text/css">
    .pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;

}

.pagination-ys table > tbody > tr > td {
    display: inline;
}

.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;    
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}

   .NoShow {
       display: none;
        }
        .Show {
        display: block;}

</style>

</head>
<body>

    <form method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTc0NTcyNjI4NQ9kFgJmDw8WBB4PX19BbnRpWHNyZlRva2VuBSBhMmYzMTFjZDgxYzk0YWI1YTMwNTkzNjA4MTFkZjNjMR4SX19BbnRpWHNyZlVzZXJOYW1lZWQWAgIED2QWAgIKDw8WBB4EVGV4dAUJVGVzdCBNb2RlHgdWaXNpYmxlZ2RkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBRxjdGwwMCRNYWluQ29udGVudCRSZW1lbWJlck1lY2T2TOdJpQiZ2wLqUndkSDg+fRewkQMPP81/Dq2gW7Y=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=yKjce5-VxvUbJP7KT-gWfYwoaaESbNHN_slDaEwEekrC1UQ76as_SbB8Hc5Or5wnxzdNwdEXAFdzWDK-glJW0ZP7HbwVk3EIof7uojudOyo1&amp;t=635586505120000000" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=Ku7zwhsXqRzDCKwXY18MqmIwhfGUIo1hBGZCdeUUvuVCwVjLsajTxvfYkRGYRhUvutiZu0uhyd51aDH9_-5cPGqH97GIdTgNWpUy7PX6S2-9UEh3gOss5TK03con4cWNKvxEV4vrfqwKJ2A6HFkBTlqAoCWFt35d5RJ75AnP8Nw1&amp;t=5303ace5" type="text/javascript"></script>
<script src="../Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="../Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl13', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>


      
       
     <div class="navbar  navbar-inverse  navbar-fixed-top">

            <div class="container">
                <img id="Image1" class="img-responsive" src="../Images/Portallogo.png" />
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                   
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="../Default">Home</a></li>
                        <li><a href="../Resident/About">About</a></li>
                        <li><a href="Contact">Contact</a></li>
                        
                     </ul>
                    
                    
                            <ul id="OneTime" class="nav navbar-nav navbar-left" >
                                 <li><a  href="../Resident/OneTimePayment.aspx">One-Time Payment</a></li>
                            </ul>
                            
                             <ul class="nav navbar-nav navbar-right" >
                                <li><a href="FindResident.aspx">Register</a> </li>
                                 <li><a href="Confirm.aspx">Confirm</a> </li>
                                <li><a href="Login.aspx">Log in</a> </li>
                            </ul>
                           
                        
                </div>
            </div>
        </div>
          <input type="hidden" name="ctl00$hf_AltEmail" id="hf_AltEmail" />           <input type="hidden" name="ctl00$hf_FullID" id="hf_FullID" />
        
       <hr />
      
        <div class="container">
             
           
             
  
    <style type="text/css">
        #wrapper {
            padding-left: 250px;
            transition: all 0.4s ease 0s;
        }

        #sidebar-wrapper {
            margin-left: -250px;
            left: 250px;
            width: 250px;
            background: #000;
            position: fixed;
            height: 100%;
            overflow-y: auto;
            z-index: 1000;
            transition: all 0.4s ease 0s;
        }

        #page-content-wrapper {
            width: 100%;
        }

        .sidebar-nav {
            position: absolute;
            top: 0;
            width: 250px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        @media (max-width:767px) {

            #wrapper {
                padding-left: 0;
            }

            #sidebar-wrapper {
                left: 0;
            }

            #wrapper.active {
                position: relative;
                left: 250px;
            }

                #wrapper.active #sidebar-wrapper {
                    left: 250px;
                    width: 250px;
                    transition: all 0.4s ease 0s;
                }
        }

       
    </style>
   <hgroup class="title">
        <h2>Log in</h2>
         
     </hgroup>
    <hr />
    
  
       

    <div class="container">

    
    <div class="row">
       <div class="col-md-8 col-xs-12">
           <h4>
               Welcome to the new resident portal.   If this is your first time to the new portal you must first register and create a new account.  Your old username and password will not work on this portal.
               All current and pay plan residents must register to use this portal.  If you are a previous resident making your moveout payment, you may use the One-Time Payment option on the menu.

           </h4>

       </div>

    </div>



        <div class="row">
        <div class="col-md-8"> 
            <section id="loginForm">
                <div class="form-horizontal">
                    
                                        
                    <br />
                    <div class="form-group">
                        <label for="MainContent_txtEmail" class="col-md-2 control-label">Email</label>
                        <div class="col-md-5">
                            <input name="ctl00$MainContent$txtEmail" type="text" id="MainContent_txtEmail" class="form-control" style="width:250px;" />
                           
                        </div>
                        <div class="col-md-5">
                             <span id="MainContent_ctl01" class="text-danger" style="visibility:hidden;">The email field is required.</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="MainContent_txtPassword" class="col-md-2 control-label">Password</label>
                        <div class="col-md-5">
                            <input name="ctl00$MainContent$txtPassword" type="password" id="MainContent_txtPassword" class="form-control" style="width:250px;" />
                           
                        </div>
                        <div class="col-md-5">
                             <span id="MainContent_ctl03" class="text-danger" style="visibility:hidden;">The password field is required.</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-3 col-md-10">
                            
                                <input id="MainContent_RememberMe" type="checkbox" name="ctl00$MainContent$RememberMe" />
                                <label for="MainContent_RememberMe">Remember me?</label>
                            
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" name="ctl00$MainContent$ctl05" value="Log in" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$ctl05&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" class="btn btn-default btn-success" />
                        </div>
                    </div>
                </div>
                <p>
               
                     <a id="MainContent_RegisterHyperLink" href="FindResident">Register</a>
            if you don't have an account.
                </p>
               <div class="row">
                        <div class="col-md-3">
                            <a href="#" data-toggle="modal"
                                data-target="#dvPasswordModal">
                                <div style="color: red;" tabindex="8">Forgot Password?</div>
                            </a>


                        </div>
                        <br />
                       
                    </div>
                <p>
                    
                   
            
               
                </p>
            </section>
        </div>

        <div class="col-md-4">
           
        </div>
    </div>
        </div>

     <div id="dvPasswordModal" class="modal fade  " role="dialog" >
      
         <div class="modal-dialog">



             <div class=" modal-backdrop">
             <div class="modal-content ">
                
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="false">Close</button>
            <h3>Forgot Your Password?</h3>
        </div>
        
        <div class="modal-body">
                    <div id="ForgotPasswordBody" >
                        <p>
                            Please enter the email address you used when you registered, then click Get New Password.  We'll send you an email message containing a code to change your password.
                        </p>
                        <div class="row">

                            <fieldset>
                                <div class=" text-center">
                                    <span class="control-label" for="txtForgotEmail">
                                               Email Address:</span>
                                    <input name="ctl00$MainContent$txtForgotEmail" type="text" value="shicks@theapartmentgallery.com" maxlength="255" id="MainContent_txtForgotEmail" title="This field is required" class="input-large" name="User-Name" />
                                    <span id="MainContent_RegularExpressionValidator1" ccsclass="text-danger" style="color:Red;visibility:hidden;">*</span>
                                    <span id="MainContent_RequiredFieldValidato5" style="color:Red;visibility:hidden;">*</span>
                                    <span></span>
                                </div>
                                <div id="MainContent_ctl07" style="display:none;">

</div>


                            </fieldset>


                        </div>

                        <div class="row">
                            <p>
                                &nbsp;
                            </p>
                            <div class="text-center">
                                <input type="submit" name="ctl00$MainContent$ctl08" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$ctl08&quot;, &quot;&quot;, true, &quot;ForgotPassword&quot;, &quot;&quot;, false, false))" class="btn btn-success" />


                            </div>
                        </div>


                    </div>
            
            
          </div></div></div></div>

    </div>




       
   
    

  

           <hr />
           <footer>
                <p>&copy; 2015 - MGM Enterprises, Inc.&nbsp;&nbsp; - &nbsp;&nbsp;  <span id="lblMode" style="color:Red;font-size:Medium;">Test Mode</span>
                </p>
            </footer>
    </div>
          <input type="hidden" name="ctl00$hfUserType" id="hfUserType" />
          <input type="hidden" name="ctl00$hfPayType" id="hfPayType" />
          <input type="hidden" name="ctl00$hfAutoPay" id="hfAutoPay" value="NO" />
    
<script type="text/javascript">
//<![CDATA[
var Page_ValidationSummaries =  new Array(document.getElementById("MainContent_ctl07"));
var Page_Validators =  new Array(document.getElementById("MainContent_ctl01"), document.getElementById("MainContent_ctl03"), document.getElementById("MainContent_RegularExpressionValidator1"), document.getElementById("MainContent_RequiredFieldValidato5"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var MainContent_ctl01 = document.all ? document.all["MainContent_ctl01"] : document.getElementById("MainContent_ctl01");
MainContent_ctl01.controltovalidate = "MainContent_txtEmail";
MainContent_ctl01.errormessage = "The email field is required.";
MainContent_ctl01.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_ctl01.initialvalue = "";
var MainContent_ctl03 = document.all ? document.all["MainContent_ctl03"] : document.getElementById("MainContent_ctl03");
MainContent_ctl03.controltovalidate = "MainContent_txtPassword";
MainContent_ctl03.errormessage = "The password field is required.";
MainContent_ctl03.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_ctl03.initialvalue = "";
var MainContent_RegularExpressionValidator1 = document.all ? document.all["MainContent_RegularExpressionValidator1"] : document.getElementById("MainContent_RegularExpressionValidator1");
MainContent_RegularExpressionValidator1.controltovalidate = "MainContent_txtForgotEmail";
MainContent_RegularExpressionValidator1.errormessage = "Invalid email address";
MainContent_RegularExpressionValidator1.validationGroup = "ForgotPassword";
MainContent_RegularExpressionValidator1.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
MainContent_RegularExpressionValidator1.validationexpression = "\\w+([-+.\']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";
var MainContent_RequiredFieldValidato5 = document.all ? document.all["MainContent_RequiredFieldValidato5"] : document.getElementById("MainContent_RequiredFieldValidato5");
MainContent_RequiredFieldValidato5.controltovalidate = "MainContent_txtForgotEmail";
MainContent_RequiredFieldValidato5.errormessage = "Email is required";
MainContent_RequiredFieldValidato5.validationGroup = "ForgotPassword";
MainContent_RequiredFieldValidato5.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidato5.initialvalue = "";
var MainContent_ctl07 = document.all ? document.all["MainContent_ctl07"] : document.getElementById("MainContent_ctl07");
MainContent_ctl07.showmessagebox = "True";
MainContent_ctl07.showsummary = "False";
MainContent_ctl07.validationGroup = "ForgotPassword";
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CD85D8D2" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAxdzXaQNHLrIvH9fRLJZccQZIVCKOD01Y4MePoHr3EwW0l12w59zYt1+jCFvshz7+HTFqGINnFHKHlDYIW4PV+la1CBbLwthZahdoxyfAUfSyNQ9hSoS9lwObHpWie5D+rgO9H3ULZlxvSKmb5sZYymdD1Vjk3ntVwuzIxjBZKHHnc+Qyf4bhh8D8CKZfYtWxWlwSgSQtIkXHdGWDnz6KozZ4uh1CtpGuCm189MWWAC+9BpNRsporOyKGy69gWcnMZlh+NRRv7L9DuX8OX4Yqg0OyXaBwKG7M+ttT14bxUayw==" />
</div>

<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        
(function(id) {
    var e = document.getElementById(id);
    if (e) {
        e.dispose = function() {
            Array.remove(Page_ValidationSummaries, document.getElementById(id));
        }
        e = null;
    }
})('MainContent_ctl07');

document.getElementById('MainContent_ctl01').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_ctl01'));
}

document.getElementById('MainContent_ctl03').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_ctl03'));
}

document.getElementById('MainContent_RegularExpressionValidator1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_RegularExpressionValidator1'));
}

document.getElementById('MainContent_RequiredFieldValidato5').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_RequiredFieldValidato5'));
}
//]]>
</script>
</form>



     <script>


         $(document).ready(function () {
             var AllowOneTime = $('#hfUserType').val();
             var myCTC = document.getElementById("OneTime");


             if (AllowOneTime == 'false') {
                 $('#OneTime').removeClass('Show');
                 $('#OneTime').addClass("NoShow");
             }
             else {
                 $('#OneTime').removeClass('NoShow');
                 $('#OneTime').addClass('Show');
             };
            
             if ($('#hfAutoPay').val() == 'YES')
             {
                 $('.AutoPay').hide();
                 $('.AutoPayYes').show();
             }
             else
             {
                 $('.AutoPay').show();
                 $('.AutoPayYes').hide();
              };

                 
              if ($('#hfPayType').val() == 'NoChecks') {
                  //bootbox.alert("My Message - No Checks")
                  $('.Checks').hide();

              };
                      
              $('.datepicker').datepicker()
              
              
          });
          
        
    </script>
   

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"e8596812fd15430e979208afd11995c0"}
</script>
<script type="text/javascript" src="http://localhost:62188/3122c78b865e48f08a67dee212f1ec33/browserLink" async="async"></script>
<!-- End Browser Link -->
[embed=file 932038]
</body>
</html>

Open in new window

Modal-Issue.png
Julian HansenCommented:
It seems to work for me - see this link

I had to change some of the paths to scripts and css files and remove some of the .Net AJAX code as it was causing script errors but as you can see from the link above it does work.

Do you have a live link where we can look at the page in action?

Otherwise start by comparing the code in the sample with your code and one line at a time bring your code in line with the sample until the process works - that should tell you where the problem is.
mgmhicksAuthor Commented:
I finally got it, I had to add data-backdrop="static" to

<a href="#" data-toggle="modal"
                                data-target="#dvPasswordModal" data-backdrop="static">
                                <div style="color: red;" tabindex="8">Forgot Password?</div>
                            </a>

thanks for the help

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Ah, misread the question - I thought you were saying the semi-opaque background was not showing - did not realise you were asking to disable esc / click to close modal.

Well done though for nailing it.
mgmhicksAuthor Commented:
I answered my own question correctly
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.