title: PHP echo not open model popup instead js alert
body: <p>I created a model pop up. I have issue that is I want add this model pop in php echo as like alert.</p>
  
  <p>But when I add this html in php echo or <code>$msg=""</code> it is not working and not shows as like popup or alert.</p>
  
  <p>Even all Css or js file I added o that same page.</p>
  
  <p>Is it possible to add custom model pop in php echo ? </p>
  
  <p>Please help</p>
  
  <p>How I make this..</p>
  
  <p>If there my mistake in code please req. Fix this.</p>
  
  <p>My code I am using is mention below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    var appendthis = ("&lt;div class='modal-overlay js-modal-close'&gt;&lt;/div&gt;");
  
    function open(e) {
      $("body").append(appendthis);
      $(".modal-overlay").fadeTo(500, 0.7);
      $("#popup1").fadeIn();
    }
  
    function close() {
      $(".modal-box, .modal-overlay").fadeOut(500, function() {
        $(".modal-overlay").remove();
      });
    }
  
    $("header .js-modal-close, .modal-overlay").click(function() {
      close();
    });
  
    $("footer .js-modal-close").click(function() {
      if ($(this).text() === "Done") {
        close();
      } else {
        var $modalBody = $(".modal-body");
        $modalBody.scrollTop($modalBody.scrollTop() + $modalBody.height());
      }
    });
  
    $(".modal-body").scroll(function() {
      if ($(this).scrollTop() + $(this).innerHeight() &gt;= this.scrollHeight) {
        $("footer .js-modal-close").text("Done");
      } else {
        $("footer .js-modal-close").text("Next &gt;");
      }
    });
  
    $(window).resize(function() {
      // Get maximum height of modal body. Minimum 100.
      var maxHeight = Math.max($(window).height() - 220, 100);
      $(".modal-body").css("max-height", maxHeight);
  
      $(".modal-box").css({
        left: ($(window).width() - $(".modal-box").outerWidth()) / 2,
        top: ($(window).height() - $(".modal-box").outerHeight()) / 2
      });
  
      $(".modal-body").scroll();
    })
  
    // show modal
    open();
  
    // adjust size
    $(window).resize();
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    font-family: "roboto", helvetica;
    position: relative;
    height: 100%;
    font-size: 100%;
    line-height: 1.5;
    color: #444;
  }
  
  h2 {
    margin: 1.75em 0 0;
    font-size: 5vw;
  }
  
  h3 {
    font-size: 1.1em;
  }
  
  .v-center {
    height: 100vh;
    width: 100%;
    display: table;
    position: relative;
    text-align: center;
  }
  
  .v-center&gt;div {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    top: -10%;
  }
  
  .btn {
    font-size: 3vmin;
    padding: 0.75em 1.5em;
    background-color: #fff;
    border: 1px solid #bbb;
    color: #333;
    text-decoration: none;
    display: inline;
    border-radius: 4px;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
  }
  
  .btn:hover {
    background-color: #ddd;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
  }
  
  .btn-small {
    padding: .75em 1em;
    font-size: 0.8em;
  }
  
  .modal-box {
    display: none;
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 1000;
    width: 100%;
    background: white;
    border-bottom: 1px solid #aaa;
    border-radius: 2px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
    max-width: 90%;
  }
  
  @media screen and (min-width: 32em) {
    .modal-box {
      width: 70%;
      overflow: auto;
    }
  }
  
  .modal-box header,
  .modal-box .modal-header {
    padding: 1.25em 1.5em;
    border-bottom: 1px solid #ddd;
  }
  
  .modal-box header h3,
  .modal-box header h4,
  .modal-box .modal-header h3,
  .modal-box .modal-header h4 {
    margin: 0;
  }
  
  .modal-box .modal-body {
    padding: 0em 1.5em;
    overflow: auto;
  }
  
  .modal-box footer,
  .modal-box .modal-footer {
    padding: 1em;
    border-top: 1px solid #ddd;
    background: rgba(0, 0, 0, 0.02);
    text-align: right;
  }
  
  .modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3) !important;
  }
  
  a.close {
    line-height: 1;
    font-size: 1.5em;
    position: absolute;
    top: 5%;
    right: 2%;
    text-decoration: none;
    color: #bbb;
  }
  
  a.close:hover {
    color: #222;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel='stylesheet' type='text/css'&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="popup1" class="modal-box"&gt;
    &lt;header&gt; &lt;a href="#" class="js-modal-close close"&gt;×&lt;/a&gt;
      &lt;h3&gt;Pop Up One&lt;/h3&gt;
    &lt;/header&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare
        mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque
        nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare,
        consectetur erat.&lt;/p&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare
        mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque
        nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare,
        consectetur erat.&lt;/p&gt;
  
    &lt;/div&gt;
    &lt;footer&gt; &lt;a href="#" class="btn btn-small js-modal-close"&gt;Next&lt;/a&gt; &lt;/footer&gt;
  &lt;/div&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt; </code></pre>
  </div>
  </div>
  </p>