title: How to open a modal dialog popup from an iframe (sharepoint hosted app, (app part))) in the parent window
body: <p>so I developed this sharepoint hosted app with an app part which renders a calendar, when they click on a day it must open a modal popup with an url that I already have.</p>
  
  <p>I will paste the error at the end.</p>
  
  <p>
  
      
      </p>
  
  <pre><code>&lt;script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/_layouts/15/sp.runtime.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/_layouts/15/sp.js"&gt;&lt;/script&gt;
  
  &lt;!-- Core CSS File. The CSS code needed to make eventCalendar works --&gt;
  &lt;link rel="stylesheet" href="../Content/eventCalendar.css"&gt;
  
  &lt;!-- Theme CSS file: it makes eventCalendar nicer --&gt;
  &lt;link rel="stylesheet" href="../Content/eventCalendar_theme_responsive.css"&gt;
  </code></pre>
  
  <p>
  
      
      
      
      
      
  </p>
  
  <p></p>
  
  <p>Here is the JS</p>
  
  <pre><code>var SPHostUrl;
  var SPAppWebUrl;
  var ListaEventos;
  var Categoria;
  var ready = false;
  var $events = [];
  
  // this function is executed when the page has finished loading. It performs two tasks:
  //    1. It extracts the parameters from the url
  //    2. It loads the request executor script from the host web
  $(document).ready(function () {
      var params = document.URL.split("?")[1].split("&amp;");
      for (var i = 0; i &lt; params.length; i = i + 1) {
          var param = params[i].split("=");
          switch (param[0]) {
              case "SPAppWebUrl":
                  SPAppWebUrl = decodeURIComponent(param[1]);
                  break;
              case "SPHostUrl":
                  SPHostUrl = decodeURIComponent(param[1]);
                  break;
              case "TituloListaEventos":
                  TituloListaEventos = decodeURIComponent(param[1]);
                  break;
              case "Categoria":
                  Categoria = decodeURIComponent(param[1]);
                  break;
              case "NombreListaEventos":
                  NombreListaEventos = decodeURIComponent(param[1]);
                  break;
          }
      }
  
      // load the executor script, once completed set the ready variable to true so that
      // we can easily identify if the script has been loaded
      $.getScript(SPHostUrl + "/_Layouts/15/SP.RequestExecutor.js", function (data) {
          ready = true;
          getItems();
          ShowServerInformation();
      });
  
  
      var sub = SPHostUrl.substring(0, SPHostUrl.lastIndexOf('/'))
      $('head').append('&lt;link rel="stylesheet" href="' + sub + '/Style%20Library/SPCCapatech/SPCCapatech.css"&gt;');
      $('head').append('&lt;link rel="stylesheet" href="' + sub + '/Style%20Library/SPCCapatech/colors.css"&gt;');
  });
  
  function ShowServerInformation() {
  
      var options = {
          url: "/_layouts/Viewlsts.aspx&amp;IsDlg=1",
          tite: 'Server Information',
          allowMaximize: false,
          showClose: true,
          width: 430,
          height: 230
      };
      parent.SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
      return false;
  
  }
  </code></pre>
  
  <p>whenthe showserverinformation function is executed I get this error:</p>
  
  <pre><code> Permission denied to access property "SP"
  </code></pre>