javascript
  • php
  • jquery
  • 2017-02-09 39 views 1 likes 
    1

    我嘗試創建一個系統,其中用戶將點擊一個鏈接並將該鏈接加載到同一頁面上的彈出窗口中。例如;你有一個像是否可以在彈出窗口中加載另一個php文件

    <a href='user_message.php?hash=$hash'>$username</a>

    一個PHP鏈接是有可能,如果鏈路上的用戶點擊,它會在同一頁面上彈出加載。請任何幫助,將不勝感激。

    我有我的知識範圍內 PHP

    echo"<a href='account.php?hash=$hash>connect</a> 
    <script type=text/javascript> 
        $('a').click(function (e) { 
    e.preventDefault(); 
    $('.boxes').fadeIn('slow').load('user_connect.php?hash=$hash'); 
    }); 
    </script> 
    

    我相信這個事實,我有prevntDefaulta不會使這項工作。 請這怎麼可能

    +0

    您可能想要考慮一個JavaScript插件,如[Fancybox](http://fancybox.net/) – roberto06

    +0

    您可以創建一個由CSS隱藏的div,點擊鏈接後,您可以使其可見使用非常簡單的jQuery! – Soheyl

    回答

    0

    沒有測試,但它應該是相當容易:

    $(document).on('click', 'a', function(e){ 
        e.preventDeafult(); //don't let browser follow the link 
    
        var href = $(this).attr('href'); //get the href from original link 
        var options = "toolbar=no,location=no,directories=no,menubar=no,scrollbars=yes,width=500,height=500"; 
        //Now open the popup 
        window.open(href, 'NameOfTheWindow', options); 
    }) 
    

    記住,這個代碼將覆蓋behaivior你頁面上的所有鏈接。如果只需要在彈出窗口中打開其中的一些,請添加類並在處理程序中使用它。

     $(document).on('click', 'a.js-open-in-popup', func... 
    
    0

    CSS:

    .pop { 
    display: none; 
    } 
    

    HTML:

    <div id="pop" class="pop ">ur data</div> 
    <a href="" id="link"></a> 
    

    JS:

    jQuery(document).ready(function(){ 
    jQuery("#link").click.(function(){ 
        jQuery("#pop").css("display", "block"); 
    }); 
    }); 
    
    0

    令人驚訝的在我的問題代碼實際工作。注意到我已經解決了想在這裏說明一下

    問題的問題,因爲我echoedJavaScriptPHP$hash是最初的問題的JS(原因訪問是我寫JS scriptPHP代碼之外,該.load有效地工作。

    風格.boxes

    .boxes { 
        width: 50%; 
        height: 50%; 
        position: fixed; 
        z-index: 9000; 
        display: none; 
        left: 25%; 
        top: 25%; 
        background-color: #ffffff; 
        box-shadow: 0 0 4px #ccc; 
        -webkit-box-shadow: 0 0 4px #ccc; 
        -moz-box-shadow: 0 0 4px #ccc; 
        -o-box-shadow: 0 0 4px #ccc; 
    } 
    

    謝謝大家貢獻參與ñ。

    相關問題