locked
Gray out the background RRS feed

  • Question

  • User-401818107 posted

    I have a pop up window. When the window pops up, it should gray out and disable the page. How to modify the function below to gray out and disable the page. Below is my coding:

    function Openpopup(popurl)
     
    {
    var width = 500;
          var height = 500;
       var top = parseInt((screen.availHeight/2) - (height/2));
      var left = parseInt((screen.availWidth/2) - (width/2));
    winpops = window.open(popurl,"","width=500, height=500, left="+ left + ",top=" + top + ",screenX=" + left + ",screenY=" + top)
     
     
     
      </script>  

    Thank you!

    Friday, November 16, 2018 12:51 PM

Answers

  • User839733648 posted

    Hi Jessy,

    You could add a function to reload the page when modal is hidden, and the JS code is as below.

    And it is better to customize a class instead of an id of the button.

        <script type="text/javascript">
            $(function () {
                $('.openurl').click(function () {
                    var url = $(this).attr("geturl");
                    $('#showUrl').attr('src', url);
                });
                $('#exampleModal').on('hidden.bs.modal', function () {
                    window.location.reload();
                });
            })
        </script>
    <button type="button" class="btn openurl" data-toggle="modal" data-target="#exampleModal" geturl='<%=products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>'>
    <img  src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></td></button>


    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 27, 2018 2:09 AM

All replies

  • User-2054057000 posted

    You can Gray and disable the background when popup appears by creating an overlaying div on the fly in JS

    This JavaScript code is given below:

    var gab = document.createElement('div');
    gab.setAttribute('id', 'OVER');
    gab.innerHTML='<div class="overlay"></div>';
    document.body.appendChild(gab);

    Note that inside the 'overlay' div you will add the html code of your popup

    Also include the below CSS in your stylesheet:

    #OVER {
        width:100%; 
        height:100%; 
        left:0;/*IE*/ 
        top:0; 
        text-align:center; 
        z-index:5; 
        ; 
        background-color:#fff;
    }
    .overlay {
        width:100%; 
        z-index:6; 
        left:0;/*IE*/ 
        top:30%; 
        font-size:0.8em; 
        text-align:center; 
        ; 
        background-color:#000;
    }

    I have created this popup in an HTML page, the full code of the HTML page is given below:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #OVER {
                width: 100%;
                height: 100%;
                left: 0; /*IE*/
                top: 0;
                text-align: center;
                z-index: 5;
                ;
                background-color: #fff;
            }
    
            .overlay {
                width: 100%;
                z-index: 6;
                left: 0; /*IE*/
                top: 30%;
                font-size: 0.8em;
                text-align: center;
                ;
                background-color: #000;
            }
        </style>
    </head>
    <body>
        <div id="container" style="margin:auto;width:700px;">
            <h1>I am container</h1>
            <p>Good Morning</p>
            <button id="popupButton" onclick="OpenPopup();">Open Popup</button>
            <p>Thanks for visiting</p>
        </div>
    
        <script>
            function OpenPopup() {
                var gab = document.createElement('div');
                gab.setAttribute('id', 'OVER');
                gab.innerHTML = '<div class="overlay"><div id="popup" style="background-color:aqua"><h2>Hello,</h2><p>I am the popup</p><button id="closeButton" onclick="ClosePopup()">Close</button></div></div>';
                document.body.appendChild(gab);
            }
    
            function ClosePopup() {
                document.getElementById("OVER").remove();
            }
        </script>
    </body>
    </html>

    The video shows how this popup will work:

    There is also another way to create popup using Bootstrap Modal which is easiest way to create popups.

    Saturday, November 17, 2018 2:29 AM
  • User-401818107 posted

    Thank you! My problem is how to gray out the background page  when open a new window by clicking hyperlink inside datalist. I get the popup window work now, but the background page is not grayed out.  Reading your reference, the pop up page is written inside the javascript, and it does not work for mine. Since I need to retrieve the information from the database in the popup window. Could you advise how to modify the code below. Everything works, but the background page is not grayed out. 

    <script language="javascript" type="text/javascript">
    function Openpopup(popurl)
     
    {
    var width = 500;
          var height = 500;
       var top = parseInt((screen.availHeight/2) - (height/2));
      var left = parseInt((screen.availWidth/2) - (width/2));
    winpops = window.open(popurl,"","width=500, height=500, left="+ left + ",top=" + top + ",screenX=" + left + ",screenY=" + top)
     
      </script>  

    <a href="javascript:Openpopup('product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>')">

    Thank you!

    Saturday, November 17, 2018 5:24 AM
  • User-2054057000 posted

    Jessy

    Everything works, but the background page is not grayed out. 

    You can make background color gray by using applying background-color: rgba(0,0,0,0.4); to the Over element in the css. See the updated code.

    #OVER {
        ...
        background-color: rgba(0,0,0,0.4);
    }

    Jessy

    Since I need to retrieve the information from the database in the popup window. Could you advise how to modify the code below.

    The script code where the popup is made is:

    gab.innerHTML = '<div class="overlay"><div id="popup" style="background-color:aqua"><h2>Hello,</h2><p>I am the popup</p><button id="closeButton" onclick="ClosePopup()">Close</button></div></div>';

    Now you have to get the values from database. So in your C# page (server page), you fetch the values from database and add it to some hidden controls. Now all you have to modify the gab.innerHTML to include the hidden field's values at appropriate pages. 

    Saturday, November 17, 2018 1:00 PM
  • User839733648 posted

    Hi Jessy,

    According to your description and code, I suggest that you could use the following code to show your popup window.

    function open(url) {
        $('#block').fadeIn(); // show grayed pane
        $('#iframe').attr('src', url); // update src of iframe
        $('#container').fadeIn(); // show container with iframe
    }

    And the complete demo you could refer to: sample fiddle

    Besides, you could refer to the similar issue in the following link to get more ideas: Gray out parent window when child window is up

    Best Regards,

    Jenifer

    Tuesday, November 20, 2018 8:03 AM
  • User-401818107 posted

    I tried the following code, but it did not work. Please advise! Thank you!

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function open(url) {
        $('#block').fadeIn();
        $('#iframe').attr('src', url);
        $('#container').fadeIn();   
    }
    
    function close() {  
        $('#block').fadeOut();
        $('#container').fadeOut();  
    }
    
    $(document).ready(function() {
      $('ul').css({width: $('#container').width()-20,height:    $('#container').height()-90})
            
         $('#closebtn').click( function() { close() })
         $('#empli').click( function() { open('http://jsfiddle.net/') })
            
    });
    
    </script>
    
    <style type="text/css">
    
    * { font-family: Trebuchet MS; }
    #container {width:90%; height: 90%; display: none; ;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
    /*#container iframe {display:none; width: 100%; height: 100%; ; border: none; }*/
    #block {background: #000; opacity:0.6;  ; width: 100%; height: 100%; top:0; left:0; display:none;}
    ul { padding:10px; background: #EEE; ; height: 200px; overflow: scroll;}
    ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
    h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
    #closebtn { top: 13px;;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
    #closebtn:hover {  cursor: pointer; background: #E5E5E5 }
    
    #empli { top: 13px;;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
    #empli:hover {  cursor: pointer; background: #E5E5E5 }
    
    
    </style>
    
    </head>
    
    <body>
    
    <span id="empli">Employees</span>
    
    <div id="block"></div>
    <div id="container">
        <iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
        <span id="closebtn">Close</span>
    </div>
    </body>
    </html>
    

    Tuesday, November 20, 2018 6:12 PM
  • User-401818107 posted

    Hi Yogyogi, I tested your coding. When I the window pops up, all the background page is blank. I want to keep my existing page as the background.

    Thank you!

    Tuesday, November 20, 2018 7:01 PM
  • User839733648 posted

    Hi Jessy,

    I tried the following code, but it did not work. Please advise! Thank you!

    It seems that your code does not contain the jquery reference since the code using Jquery syntax.

    You should add following reference in the <head> tag.

    <head>
    <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> ...... </script> <style type="text/css"> ...... </style> </head>

    Best Regards,

    Jenifer

    Wednesday, November 21, 2018 7:33 AM
  • User-2054057000 posted

    Jessy

    Hi Yogyogi, I tested your coding. When I the window pops up, all the background page is blank. I want to keep my existing page as the background.

    Thank you!

    Please change the #Over css background-color property to:

    #OVER {
        ...
        background-color: rgba(0,0,0,0.4);
    }

    I checked the code in my chrome browser. The background is coming as greyish with transparent.

    Wednesday, November 21, 2018 9:40 AM
  • User-401818107 posted

    Thank you Jogyogi and Jenifer! I have no problem for a single button or single image etc. But currently the popup window is based on the idproduct of each image. When click each id image, the popup window will display the contents of the corresponding item. Below is my coding. How to accomplish it using the simple coding. 

    <asp:DataList ID="dg"
    									           CellPadding="0"
                                                   CellSpacing="0"
                                                   RepeatDirection="Horizontal"
    									           borderstyle= "none"
    									           GridLines="None"
    									           RepeatLayout="Table"
    									           RepeatColumns="3"									          
    									           ShowBorder="false"
    									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">
                                                   
                                                   
                                                   
    
                                       <ItemTemplate>
    								   
    	 
    						
    
    <table >
    
        
        <tr>
    		<td> <a href="<products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
    <img src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg">
     </a> 
    
    </td>
    	</tr>
    	
        
        
    	<tr>
    		<td><%# DataBinder.Eval(Container.DataItem, "productname") %>	</td>
    	</tr>
    	<tr>
    		<td><%# DataBinder.Eval(Container.DataItem, "productsku") %>	</td>
    	
        
        </tr>    
        
    	
    </table>
    					



    Thursday, November 22, 2018 4:58 AM
  • User-401818107 posted

    Please advise! Thank you!

    Saturday, November 24, 2018 5:34 AM
  • User839733648 posted

    Hi Jessy,

    I suggest that you could use Bootstrap Modal with your datalist. This brings the effect of graying the background.

    You could customize an attribute to save the url from your database and then use jquery to get the url.

    At last, you may set the src of iframe in the modal as the url you've got.

    For more, you could refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
        <script type="text/javascript">
            $(function () {
                $('#openurl').click(function () {
                    var url = $(this).attr("geturl");
                    $('#showUrl').attr('src', url);
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DataList ID="dg" CellPadding="0" CellSpacing="0" RepeatDirection="Horizontal" BorderStyle="none" GridLines="None"
                    RepeatLayout="Table" RepeatColumns="3" ShowBorder="false" runat="server" HeaderText="" HeaderStyle-BackColor="#fff"
                    HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <button id="openurl" type="button" class="btn" data-toggle="modal" data-target="#exampleModal" geturl='<%# DataBinder.Eval(Container.DataItem, "Href") %>'>
                                        <%# DataBinder.Eval(Container.DataItem, "Model") %>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td><%# DataBinder.Eval(Container.DataItem, "ID") %>	</td>
                            </tr>
                            <tr>
                                <td><%# DataBinder.Eval(Container.DataItem, "Href") %>	</td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <iframe id="showUrl"></iframe>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_HyperLink]"></asp:SqlDataSource>
            </div>
        </form>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Monday, November 26, 2018 7:40 AM
  • User-401818107 posted

    I followed your example and modified my code per below, but all the item in the page from the link goes to the same item (the first item) in the modal window. Please advise!

    Thank you!

      
    <button id="openurl" type="button" class="btn" data-toggle="modal" data-target="#exampleModal" geturl='<%=products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>'>
    <img  src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></td></button>



    Monday, November 26, 2018 9:06 PM
  • User-401818107 posted

    I also saved the URL in the database, but still retrieve the same item from the modal window.

    Monday, November 26, 2018 10:40 PM
  • User839733648 posted

    Hi Jessy,

    You could add a function to reload the page when modal is hidden, and the JS code is as below.

    And it is better to customize a class instead of an id of the button.

        <script type="text/javascript">
            $(function () {
                $('.openurl').click(function () {
                    var url = $(this).attr("geturl");
                    $('#showUrl').attr('src', url);
                });
                $('#exampleModal').on('hidden.bs.modal', function () {
                    window.location.reload();
                });
            })
        </script>
    <button type="button" class="btn openurl" data-toggle="modal" data-target="#exampleModal" geturl='<%=products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>'>
    <img  src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></td></button>


    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 27, 2018 2:09 AM
  • User-401818107 posted

    Thank you very much Jenifer! In the chrome, there is no error and it is running, but in the Firefox it has an error "jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."

    In the Internet Explorer, it cannot run at all.  Please advise!

    If I do not want the modal page displayed in the frame, how to fix it?

    Thank you!

    Tuesday, November 27, 2018 7:23 PM
  • User-401818107 posted

    OK. I have added the style to iframe and fix the issue, and it works fine now.

    My current problem is how to fix the error "jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."

    Thank you!

    Tuesday, November 27, 2018 7:29 PM
  • User-401818107 posted

    Jenifer, I only use your code to test. No other scripts are in the file. Please advise! Thank you!

    Tuesday, November 27, 2018 8:44 PM
  • User-401818107 posted

    Figure it out. Is my modal window which caused this issue. Thank you!

    Tuesday, November 27, 2018 9:39 PM
  • User-401818107 posted

    Sorry, in the Firefox, it still shows something per below:
    To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.

    In the internet explorer, it has error for the scripts and does not work.


    In the bootstrap.min.css style sheet, which controls the width of the modal window? In the style sheet which class and ID is very important for the modal window? Since it distorted my whole page after adding bootstrap.min.css file. Thank you!

    Tuesday, November 27, 2018 11:30 PM
  • User-401818107 posted

    Also, the page refreshes when the modal window is closed in two seconds. How to fix it. Thank you!

    Wednesday, November 28, 2018 4:21 AM