How can I be doing multiple modalities on a page, just pulling another PHP page within the modal?

Question

How can I be doing multiple modalities on a page, just pulling another PHP page within the modal?

Navigation

#1 by (1 votes)

1

I have a code that opens a modal with another PHP page within modal, but I only managed to do that with a page. I would like to do the same thing using this code for the other buttons, only opening other distinct pages. Can someone help me with this.

My code goes below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 20px; /* Location of the box */
        left: 0;
        top: 0;
        padding-left: 300px;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 80%;
        background-image: url("images/fundo_claro.jpg") ;

        -moz-box-shadow: 1px 1px 30px #000;
        -webkit-box-shadow: 1px 1px 30px #000;
        box-shadow: 1px 1px 30px #000;
        border-radius: 10px;
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        background: #606061;
        color: #009dd9;
        line-height: 25px;
        position: relative;
        right: -12px;
        text-align: center;
        margin-left: 660px;
        top: 23px;
        padding: 5px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;}

    .close:hover {
        background: #00d9ff;
    }
    .modal-header {
        padding: 2px 16px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 5px 0;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);

    }

    .modal-body {
        padding: 2px 16px;
        margin-bottom: 10px;
        padding: 5px 0;
        position: relative;
        }

    .modal-footer {

        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 20px 0;

    }
    .btn {
        display: inline-block;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid ;
        border-radius: 4px;
        height: 50px ;
        font-weight: bold;
        background-color: white;
    }   
</style>
</head>
<body>

<center>
<button id="myBtn" style="cursor: pointer" >Grafico Failure Overall</button><br><br>
<button id="myBtn1"  style="cursor: pointer">Grafico Process Breakdown</button><br><br>
<button id="myBtn2" style="cursor: pointer" >Grafico Commodity Breakdown</button><br><br>
<button id="myBtn3" style="cursor: pointer" >Grafico Workmanship Breakdown</button><br><br>
<button id="myBtn4" style="cursor: pointer" >Grafico Reseat Breakdown</button><br><br>
<button id="myBtn5" style="cursor: pointer" >Grafico Desktop TBG</button><br><br>
<button id="myBtn6" style="cursor: pointer" >Grafico Notebook TBG</button><br><br>
<button id="myBtn7" style="cursor: pointer" >Grafico Ultrabook TBG</button>
</center>


<div id="myModal" class="modal">

    <!-- Modal content -->
    <!-- <div class="modal-content"> -->

        <div class="modal-body">
        <span class="close">X</span><br>
            <?php include "grafico1.php";?>
        </div> 
</div>



<script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>


</body>
</html>

php javascript jquery css bootstrap

asked by anonymous 24.05.2016 / 14:31

1 answer

Facebook API - Get photo (with defined size) with other information (name, email, id)? Rad Studio 10 Seattle - XMLTransformProvider - Encoding UTF-8

score 1 · Answer 1

Oops, easy?

Next, the way the code is displayed you are inserting the code of grafico1.php in this modal, however the php is interpreted when the page is loaded.

It has some solutions for this purpose.

Following your line you can create various modalities with load all the php files you want at once, and then hide and display what you want.

You can load ajax php content like:

jQuery.ajax ({   url: "grafico1.php",
  type: "POST",
  success: function (data) {       $ ('# modal'). html (data);   }});

Or iframe is another possibility but I do not recommend it.

And use JQuery, it's important to use it, in addition to facilitating it has compatibility and support with multiple browsers