locked
How to popup modal page on start RRS feed

  • Question

  • User-14642827 posted

    Here is my code its not working:

    <body>
    
        <div style="height: 100px">
            <img src="~/images/Landing/header_one.jpg" style="height:99%" />
        </div>
        <div>
            <p><h1>Navigate to:&nbsp;&nbsp;&nbsp;</h1><h3>Administration</h3><h3>Messages</h3><h3>Training</h3><h3>Supply</h3></p>
        </div>
    
        <div id="privacy" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal modal-header">
                        <h4 class="modal-title">Security &amp; Privacy Notice</h4>
                        <small class="font-weight-bold">Important - Please Read</small>
                    </div>
                    <div class="modal-body">
                        <p> 1. For site management, information is collected for analytical and statistical purposes. This government computer system uses software programs to create summary statistics, which are used for such proposes as assessing what information is of most and least interest, determining technical design specifications and identifying system performance or problem areas. </p>
                        <p> 2. For site security proposes and to ensure that this service remains available to all users, this government computer system employs software programs to monitor network traffic, to identify unauthorized attempts, to upload or change information or otherwise cause damage. </p>
                        <p> 3. Your interaction with this system is not anonymous. By using this system you are consenting to the monitoring of your activity. Raw data logs will only be used to identify individual users and their usage habits for authorized law enforcement investigations or national security purposes. These logs are used for not other purposes and are scheduled for regular destruction in accordance with National Archives and Records Administration <a href="#"> General Schedule 20</a> . </p>
                        <p> 4. Unauthorized attempts to deny service, upload information, change information or to attempt to access a non-public site from this service are strictly prohibited and may be punishable under Title 18 of the U.S. Code to include the Computer Fraud and Abuse Act of 1986 and the National Information Infrastructure Protection Act. </p>
                        <p> 5. If you have any questions of comments about the information presented here, please <a href="#contact" _blank> let us know</a> . <br /> <br /> </p>
                        <p>
                            <strong> The Presence of Commercial/External Links</strong>
                            The appearance of hyperlinks does not constitute endorsement by Scott Air Force Base, Air Mobility Command,
                                                </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
        <script>
            $document.ready(function () {
                $('privacy').show();
    
            });
        </script>
    
    
    </body>

    Sunday, January 7, 2018 6:02 PM

Answers

  • User-1838255255 posted

    Hi bthJ6,

    According to your description and code, as far as I know, you want to show the bootstrap modal popup when loading page, so you need add reference of the jquery and bootstrap files in then page firstly, then you need use this line code($("#privacy")) to select element through element's id, finally, use bootstrap modal method to show popup. For more details, please refer to my sample code:

    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div style="height: 100px">
            <img src="~/images/Landing/header_one.jpg" style="height:99%" />
        </div>
        <div>
            <p><h1>Navigate to:&nbsp;&nbsp;&nbsp;</h1><h3>Administration</h3><h3>Messages</h3><h3>Training</h3><h3>Supply</h3></p>
        </div>
    
        <div id="privacy" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal modal-header">
                        <h4 class="modal-title">Security &amp; Privacy Notice</h4>
                        <small class="font-weight-bold">Important - Please Read</small>
                    </div>
                    <div class="modal-body">
                        <p> 1. For site management, information is collected for analytical and statistical purposes. This government computer system uses software programs to create summary statistics, which are used for such proposes as assessing what information is of most and least interest, determining technical design specifications and identifying system performance or problem areas. </p>
                        <p> 2. For site security proposes and to ensure that this service remains available to all users, this government computer system employs software programs to monitor network traffic, to identify unauthorized attempts, to upload or change information or otherwise cause damage. </p>
                        <p> 3. Your interaction with this system is not anonymous. By using this system you are consenting to the monitoring of your activity. Raw data logs will only be used to identify individual users and their usage habits for authorized law enforcement investigations or national security purposes. These logs are used for not other purposes and are scheduled for regular destruction in accordance with National Archives and Records Administration <a href="#"> General Schedule 20</a> . </p>
                        <p> 4. Unauthorized attempts to deny service, upload information, change information or to attempt to access a non-public site from this service are strictly prohibited and may be punishable under Title 18 of the U.S. Code to include the Computer Fraud and Abuse Act of 1986 and the National Information Infrastructure Protection Act. </p>
                        <p> 5. If you have any questions of comments about the information presented here, please <a href="#contact" _blank> let us know</a> . <br /> <br /> </p>
                        <p>
                            <strong> The Presence of Commercial/External Links</strong>
                            The appearance of hyperlinks does not constitute endorsement by Scott Air Force Base, Air Mobility Command,
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
        <script>
            $(function () {
                $("#privacy").modal();
            });
        </script>
    </body>

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 9, 2018 5:49 AM

All replies

  • User475983607 posted

    There is a JS run time error and Bootstrap syntax error.  Remember to use dev tools when troubleshooting JavaScript issues and also see the Bootstrap reference docs.

    https://getbootstrap.com/docs/3.3/javascript/#modals-methods

    See the following example.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    </head>
    <body>
        <div id="privacy" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal modal-header">
                        <h4 class="modal-title">Security &amp; Privacy Notice</h4>
                        <small class="font-weight-bold">Important - Please Read</small>
                    </div>
                    <div class="modal-body">
                        <p> 1. For site management, information is collected for analytical and statistical purposes. This government computer system uses software programs to create summary statistics, which are used for such proposes as assessing what information is of most and least interest, determining technical design specifications and identifying system performance or problem areas. </p>
                        <p> 2. For site security proposes and to ensure that this service remains available to all users, this government computer system employs software programs to monitor network traffic, to identify unauthorized attempts, to upload or change information or otherwise cause damage. </p>
                        <p> 3. Your interaction with this system is not anonymous. By using this system you are consenting to the monitoring of your activity. Raw data logs will only be used to identify individual users and their usage habits for authorized law enforcement investigations or national security purposes. These logs are used for not other purposes and are scheduled for regular destruction in accordance with National Archives and Records Administration <a href="#"> General Schedule 20</a> . </p>
                        <p> 4. Unauthorized attempts to deny service, upload information, change information or to attempt to access a non-public site from this service are strictly prohibited and may be punishable under Title 18 of the U.S. Code to include the Computer Fraud and Abuse Act of 1986 and the National Information Infrastructure Protection Act. </p>
                        <p> 5. If you have any questions of comments about the information presented here, please <a href="#contact" _blank> let us know</a> . <br /> <br /> </p>
                        <p>
                            <strong> The Presence of Commercial/External Links</strong>
                            The appearance of hyperlinks does not constitute endorsement by Scott Air Force Base, Air Mobility Command,
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('#privacy').modal('show');
            });
        </script>
    </body>
    </html>

    Sunday, January 7, 2018 7:02 PM
  • User-1838255255 posted

    Hi bthJ6,

    According to your description and code, as far as I know, you want to show the bootstrap modal popup when loading page, so you need add reference of the jquery and bootstrap files in then page firstly, then you need use this line code($("#privacy")) to select element through element's id, finally, use bootstrap modal method to show popup. For more details, please refer to my sample code:

    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div style="height: 100px">
            <img src="~/images/Landing/header_one.jpg" style="height:99%" />
        </div>
        <div>
            <p><h1>Navigate to:&nbsp;&nbsp;&nbsp;</h1><h3>Administration</h3><h3>Messages</h3><h3>Training</h3><h3>Supply</h3></p>
        </div>
    
        <div id="privacy" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal modal-header">
                        <h4 class="modal-title">Security &amp; Privacy Notice</h4>
                        <small class="font-weight-bold">Important - Please Read</small>
                    </div>
                    <div class="modal-body">
                        <p> 1. For site management, information is collected for analytical and statistical purposes. This government computer system uses software programs to create summary statistics, which are used for such proposes as assessing what information is of most and least interest, determining technical design specifications and identifying system performance or problem areas. </p>
                        <p> 2. For site security proposes and to ensure that this service remains available to all users, this government computer system employs software programs to monitor network traffic, to identify unauthorized attempts, to upload or change information or otherwise cause damage. </p>
                        <p> 3. Your interaction with this system is not anonymous. By using this system you are consenting to the monitoring of your activity. Raw data logs will only be used to identify individual users and their usage habits for authorized law enforcement investigations or national security purposes. These logs are used for not other purposes and are scheduled for regular destruction in accordance with National Archives and Records Administration <a href="#"> General Schedule 20</a> . </p>
                        <p> 4. Unauthorized attempts to deny service, upload information, change information or to attempt to access a non-public site from this service are strictly prohibited and may be punishable under Title 18 of the U.S. Code to include the Computer Fraud and Abuse Act of 1986 and the National Information Infrastructure Protection Act. </p>
                        <p> 5. If you have any questions of comments about the information presented here, please <a href="#contact" _blank> let us know</a> . <br /> <br /> </p>
                        <p>
                            <strong> The Presence of Commercial/External Links</strong>
                            The appearance of hyperlinks does not constitute endorsement by Scott Air Force Base, Air Mobility Command,
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
        <script>
            $(function () {
                $("#privacy").modal();
            });
        </script>
    </body>

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 9, 2018 5:49 AM