Modals not showing

Pinegrow WP
1

Having trouble getting modals to display. Nothing shows up when triggered. Even tried a wp plugin and that did not work either. Anyone else getting the same problem?
Pinegrow Ver. 4.7

2

I did a test page in Bootstrap 3 and it seems to work fine. Try copy/pasting this code. Make sure your browser supports javascript, since that’s how the modal is triggered.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Blank Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="style.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div class="container">
</div>
        <div class="container">
            <div style="margin-top: 19px;
    margin-bottom: 19px;" class="col-md-12">
                <button type="button" class="btn btn-primary center-block" data-toggle="modal" data-target="#myModal">Modal Trigger</button>                 
            </div>
        </div>
        <div class="modal fade pg-show-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>
3

Hi there @Printninja, nice code colour syntax! :slight_smile: Anyway, just posting to confirm that this works nicely in PG 4.71, Bootstrap 3 on my machine, however, I note that the OP’s original query mentions that he even tried a WP plugin so I’m not sure if he means that he has created a Wordpress theme, including a Modal and its not working in Wordpress, and THAT is the issue…
Or, I could be wrong.

We shall have to wait and see :slight_smile: but this works nicely anyway.