PHP条件が満たされたときにポップアップを表示

Question

私はしばらくの間、以下のプロジェクトを行っています。あなたはsnnipetsを実行した後で見ることができるようにすべてがうまくいきます。

/* The dark background behind the dialogs */ 
 

 
.dialog-overlay{ 
 
    display: none; 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 

 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0,0,0,0.3); 
 

 
    z-index: 10; 
 
} 
 

 
/* The dialogs themselves */ 
 

 
.dialog-card{ 
 
    box-sizing: border-box; 
 
    width: 570px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -285px; 
 
    top: 50%; 
 

 
    font: bold 14px sans-serif; 
 

 
    border-radius: 3px; 
 
    background-color: #ffffff; 
 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12); 
 
    padding: 45px 50px; 
 
} 
 

 
.dialog-card .dialog-question-sign{ 
 
    float: left; 
 
    width: 68px; 
 
    height: 68px; 
 
    border-radius: 50%; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    line-height: 68px; 
 
    font-size: 40px; 
 
    margin-right: 50px; 
 
    background-color: #b4d8f3; 
 
} 
 

 
.dialog-card .dialog-info{ 
 
    float: left; 
 
    max-width: 350px; 
 
} 
 

 
.dialog-card h5{ \t /* Dialog title */ 
 
    color: #383c3e; 
 
    font-size: 24px; 
 
    margin: 5px 0 30px; 
 
} 
 

 
.dialog-card p{ \t \t /* Dialog text */ 
 
    color: #595d60; 
 
    font-weight: normal; 
 
    line-height: 21px; 
 

 
    margin: 30px 0; 
 
} 
 

 
.dialog-card .dialog-confirm-button, 
 
.dialog-card .dialog-reject-button{ 
 
    font-weight: inherit; 
 
    box-sizing: border-box; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
 
    padding: 12px 40px; 
 
    border: 0; 
 
    cursor: pointer; 
 
    outline: 0; 
 
} 
 

 
.dialog-card .dialog-confirm-button{ 
 
    background-color: #87bae1; 
 
    margin-right: 12px; 
 
} 
 

 
.dialog-card .dialog-reject-button{ 
 
    background-color: #e4749e; 
 
} 
 

 
.dialog-card button:hover{ 
 
    opacity:0.96; 
 
} 
 

 
.dialog-card button:active{ 
 
    position:relative; 
 
    bottom:-1px; 
 
}

<div id="my-confirm-dialog" class="dialog-overlay"> 
 

 
     <div class="dialog-card"> 
 

 
      <div class="dialog-question-sign"><i class="fa fa-question"></i></div> 
 

 
      <div class="dialog-info"> 
 

 
       <h5>Are you sure?</h5> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra id odio a pellentesque. In dapibus maximus augue, eu dapibus felis laoreet non.</p> 
 

 
       <button class="dialog-confirm-button">Yes</button> 
 
       <button class="dialog-reject-button">No</button> 
 

 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 

 
<span class="dialog-show-button" data-show-dialog="my-confirm-dialog">Show Confirm Dialog</span> 
 

 
    
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script> 
 

 
     // This is an example jQuery snippet that makes the dialogs work 
 

 
     $(document).ready(function() { 
 

 
      // We have two control functions that show or hide dialogs 
 

 
      function showDialog(id){ 
 

 
       // Find the dialog and show it 
 

 
       var dialog = $('#' + id), 
 
         card = dialog.find('.dialog-card'); 
 

 
       dialog.fadeIn(); 
 

 
       // Center it on screen 
 

 
       card.css({ 
 
        'margin-top' : -card.outerHeight()/2 
 
       }); 
 

 
      } 
 

 
      function hideAllDialogs(){ 
 

 
       // Hide all visible dialogs 
 
       $('.dialog-overlay').fadeOut(); 
 

 
      } 
 

 
      // Here is how to use these functions 
 

 
      $('.dialog-confirm-button, .dialog-reject-button').on('click', function() { 
 

 
       // Hide the dialog when the confirm button is pressed 
 
       hideAllDialogs(); 
 

 
      }); 
 

 
      $('.dialog-overlay').on('click', function (e) { 
 

 
       if(e.target == this){ 
 
        // If the overlay was clicked/touched directly, hide the dialog 
 
        hideAllDialogs(); 
 
       } 
 

 

 
      }); 
 

 
      $(document).keyup(function(e) { 
 

 
       if (e.keyCode == 27) { 
 
        // When escape is pressed, hide all dialogs 
 

 
        hideAllDialogs(); 
 
       } 
 

 
      }); 
 

 

 
      // Here, we are listening for clicks on the "show dialog" buttons, 
 
      // and showing the correct dialog 
 

 
      $('.dialog-show-button').on('click', function() { 
 

 
       // Take the contents of the "data-show-dialog" attribute 
 
       var toShow = $(this).data('show-dialog'); 
 

 
       showDialog(toShow); 
 
      }); 
 
     }); 
 

 
    </script>

Show Confirm Dialogをクリックした後、ポップアップを表示することができることに加えて、私はPHP conditionが満たされたときにポップアップを表示することができるようにしたいです。 ように：

if(condition){ 

    //Display Popup 

} 

親切に私はあなたがこれを達成できる見最も簡単な方法は、ちょうどあなたがこの関数を呼び出すことになるでスクリプトタグを作るです。この問題

Answer 1

は、JS、HTMLと同じスクリプト内でなければなりません...：

<?php 
if(1===1) { 
    echo "<script>"; 
    echo "showDialog('my-confirm-dialog');"; 
    echo "</script>"; 
} 
?> 

これは、それ以外の場合は失敗します、あなたのhtmlの最後に生きるために必要DOMがロードされていないので、など...

はあなたが置くことができることを確認すべき$(document).ready内側：

<script> 
$(document).ready(function() { 
     // leave the function-definitions and eventlisteners here 
     //... 

     // add at the very end: 
     <?php 
     if(1===1) { 
      echo "showDialog('my-confirm-dialog');"; 
     } 
     ?> 

}); 
</script> 

別の解決策は、php-conditionに応じてjs-varを設定し、jsでそれをチェックすることです。

Answer 2

を解決するのに役立ちます。 PHPを想定

<?php if(condition): ?> 
    <script type='text/javascript'> 
     showDialog(id) 
    </script> 
<?php endif; ?> 

Answer 3

JavaScriptでPHPの値を使いたい場合は、PHPのページのどこかにPHPの値を入れ、JavaScriptで読み込む必要があります。 汚いインラインスクリプトソリューションはこのようなものになるだろう：きれいな解決策は、ユースケースによって異なりますが、同様のだろう

<script> 
    var myValueFromPhp = <?= \json_encode($anyThing) ?>; 
</script> 

：

<div data-coolness="<?='yepp'?>></div> 

（またはそのような何か、に応じて