How to show selectable text in Popup? Javascript & PHP

I'm working with a URL shortener script Yourls. Work is going fine after getting some help from you guys. Thank you for that. Every button is pressed for shorten URL, a popup appear, showing Short URL for that Page. This simple method is fine for Firefox, but I cannot select the text/Shorten URL in Popup in Internet Explorer. Any suggestions how to show selectable text in popup?

This is the code of the page:

<?php 
// Start YOURLS engine
require_once( dirname(__FILE__).'/includes/load-yourls.php' );

function selfURL() { $s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : ""; $protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/").$s; $port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]); return $protocol."://".$_SERVER['SERVER_NAME'].$port.$_SERVER['REQUEST_URI']; } function strleft($s1, $s2) { return substr($s1, 0, strpos($s1, $s2)); }

?>
<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id="container">
    <?php
    // Part to be executed if FORM has been submitted
    if ( isset($_REQUEST['url']) ) {
        $url     = yourls_sanitize_url( $_REQUEST['url'] );
        $return  = yourls_add_new_link( $url );     
        $shorturl = isset( $return['shorturl'] ) ? $return['shorturl'] : '';

        echo <<<RESULT
        "<script type='text/javascript'>alert('$shorturl');</script>"
RESULT;

    // Part to be executed when no form has been submitted
    } else {

        $site = YOURLS_SITE;
        $var = selfURL();
        echo <<<HTML
        <form method="post" action="">      
        <p><input type="hidden" name="url" value="$var" /></p>
        <p><input type="submit" value="Shorten" /></p>
        </form> 
HTML;
    }
    ?>
</div>
</body>
</html>

I want to edit the code where its saying

"<script type='text/javascript'>alert('$shorturl');</script>"

How can I make the text selectable to copy?

And can any one please tell me why the page http://taimoorsultan.com/y/ is redirecting to another page when we press the button? Is it possible to show the popup on the same page without going to next page? I have already pasted the complete code above.! Thank you!

This is the Current Code::

<?php 
// Start YOURLS engine
require_once( dirname(__FILE__).'/includes/load-yourls.php' );

function selfURL() { $s = empty($_SERVER["HTTPS"]) ? '' : ($_SERVER["HTTPS"] == "on") ? "s" : ""; $protocol = strleft(strtolower($_SERVER["SERVER_PROTOCOL"]), "/").$s; $port = ($_SERVER["SERVER_PORT"] == "80") ? "" : (":".$_SERVER["SERVER_PORT"]); return $protocol."://".$_SERVER['SERVER_NAME'].$port.$_SERVER['REQUEST_URI']; } function strleft($s1, $s2) { return substr($s1, 0, strpos($s1, $s2)); }

?>
<!DOCTYPE html>
<html>
<head>
<!--Testing-->
   <?php if(isset($_REQUEST['url']): // <-- only include jQuery if url set ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
  <?php endif; ?>
<!--Testing-->
</head>

<body>



<div id="container">
    <?php
    // Part to be executed if FORM has been submitted
    if ( isset($_REQUEST['url']) ) {
        $url     = yourls_sanitize_url( $_REQUEST['url'] );
        $return  = yourls_add_new_link( $url );     
        $shorturl = isset( $return['shorturl'] ) ? $return['shorturl'] : '';

        echo <<<RESULT

RESULT;

    // Part to be executed when no form has been submitted
    } else {

        $site = YOURLS_SITE;
        $var = selfURL();
        echo <<<HTML
        <form method="post" action="">      
        <p><input type="hidden" name="url" value="$var" /></p>
        <p><input type="submit" value="Shorten" /></p>
        </form> 
HTML;
    }

    ?>


</div>

<?php if(isset($_REQUEST['url']): // <-- only include the div if url set ?>
<div id="dialog-modal" title="Basic modal dialog">
  <p><?php echo htmlspecialchars($shorturl); ?></p>
</div>
<?php endif; ?>


</body>
</html>

Solution

It isn't possible to change select-ability of the text in Internet Explorer. alert()'s are very basic ways of displaying a message and there are no configurable options, other than the message.

If you want more control you'll have to display the message on the page instead, or create your own dialog or use something like the jQuery UI Dialog.

For example on the page instead:

echo '<p>' . htmlspecialchars($shorturl) . '</p>';

Or in an <input>:

 echo '<input type="text" value="' . htmlspecialchars($shorturl) . '" />';

To add a jQuery Dialog to your page, your <head> section would need to look like (using the jQuery CDN):

<head>
  <?php if(isset($_REQUEST['url'])): // <-- only include jQuery if url set ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
  <?php endif; ?>
</head>

Add the div that will become the dialog to within your <body> element:

<?php if(isset($_REQUEST['url'])): // <-- only include the div if url set ?>
<div id="dialog-modal" title="Basic modal dialog">
  <p><?php echo htmlspecialchars($shorturl); ?></p>
</div>
<?php endif; ?>