JavaScript Fenster für Benutzer anzeigen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • JavaScript Fenster für Benutzer anzeigen

    HiHo,

    Mir fällt leider kein Begriff ein aber ich versuch es mal zu beschreiben.
    Wenn man eine bestimmte Seite öffnet soll sich eine Art popup öffnen, nur das dieses eine kleine Info für die User bereit stellt.
    Genauer gesagt, wenn ein User eine bestimmte Foren ID aufruft soll sich ein kleies javascript fenster mit Infos öffen.
    Kennt da wer was?

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Fragz ()

  • Wie soll das denn aussehen?

    Ein Fenster, also Popup?
    Ein Div?

    [jsfiddle]TorbenBrodt/95NGE[/jsfiddle]

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    5. <title>jquery dialog - jsFiddle demo by TorbenBrodt</title>
    6. <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
    8. <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    9. <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    11. <style type='text/css'>
    13. </style>
    15. <script type='text/javascript'>
    16. //<![CDATA[
    17. $(window).load(function(){
    18. $( "#dialog" ).dialog();
    19. });
    20. //]]>
    21. </script>
    23. </head>
    24. <body>
    25. <!DOCTYPE html>
    26. <html lang="en">
    27. <base href="http://jqueryui.com/"/>
    28. <head>
    29. <meta charset="utf-8">
    30. <title>jQuery UI Dialog - Default functionality</title>
    31. <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
    32. <script src="external/jquery.bgiframe-2.1.2.js"></script>
    33. <script src="ui/jquery.ui.core.js"></script>
    34. <script src="ui/jquery.ui.widget.js"></script>
    35. <script src="ui/jquery.ui.mouse.js"></script>
    36. <script src="ui/jquery.ui.draggable.js"></script>
    37. <script src="ui/jquery.ui.position.js"></script>
    38. <script src="ui/jquery.ui.resizable.js"></script>
    39. <script src="ui/jquery.ui.dialog.js"></script>
    40. </head>
    41. <body>
    43. <div id="dialog" title="Basic dialog">
    44. <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    45. </div>
    47. </body>
    48. </html>
    50. </body>
    53. </html>
    Alles anzeigen

  • So ein bisschen php musst du dir langsam mal selber aneigenen. Es handelt sich hier nur um ein echo. Das ist Lektion Nummer 1.
    Fehlen tuen offensichtlich noch die script Tags die, die du ausgeben musst, siehe #3 und #7

    Quellcode

    1. if ($f !== 2 )
    2. {
    3. echo '<script>';
    4. echo "$(document).load(function(){
    5. showDialog('Success','Your request has been successfully received.','success')
    6. });";
    7. echo '</script>';
    8. }

  • HiHo,

    Ok irgendwie haut das ganze noch nicht wirklich.

    Im Body Tag klappt es ohne Probleme. Auch wenn ich den Link anklicke klappt es.
    Allerdings wenn ich den Code in php einfüge haut es nicht hin.

    Quellcode

    1. echo "<script type=\"text/javascript\">" . chr(10);
    2. echo "$(document).load(function(){" . chr(10);
    3. echo "showDialog('Success','Your request has been successfully received.','success')" . chr(10);
    4. echo "}" . chr(10);
    5. echo '</script>' . chr(10);


    Das Problem was ich habe bzw wo ich denke liegt darin das der PHP Code an der Falschen stelle ist um richtig zu funktionieren.
    Der Code soll NUR ausgeführt werden wenn jemand zb hier im Forum auf "Thema erstellen" klickt. Sprich ich kann ihn nicht in den PHP Teil setzen der für den Header zuständig ist.
    Es gibt in meinem Forum eine class_core.php, diese generiert den Header bis zum Body Tag. Die class_posting.php generiert die Postboxen etc und genau in diese File muss sie rein, ausserhalb den <head> und innerhalb von <body></body>

    Kann man evtl mit hilfe von JS diese funktion aufrufen wenn der $_GET parameter f die 2 enthällt?
    post.php?mode=new&f=2

  • Ok ich habs nun anders gelöst.
    Der Block der die Forenregeln im htm Dokument ausgibt habe ich gelöscht und die Funktion eingefügt.

    Aus

    Quellcode

    1. {if $RULES != ''}
    2. <div class="forum_rules">
    3. <h2>{$LANG.forum_rules_set}</h2>
    4. <br />
    5. {if $IS_RULES_LINK}
    6. {$LANG.forum_rules_text}
    7. <br /><br />
    8. <a href="topic.{$EXT}?t={$RULES}" target="_blank">{$LANG.forum_rules_click}</a>
    9. {else}
    10. {$RULES}
    11. {/if}
    12. </div>
    13. {/if}
    Alles anzeigen


    wurde

    Quellcode

    1. {if $RULES != ''}
    2. <script language="JavaScript" type="text/javascript">
    3. showDialog('{$LANG.forum_rules_set}','{$RULES}','success')
    4. </script>
    6. {/if}


    Ohne den Platzhalter {$RULES} der die Regeln ausgibt klappt es, sprich wenn ich es durch einen Text ersetze. Mit dem Platzhalter nicht.
    Als Template ENgine nutze ich Smarty. Hat dafür wer einen Tip?


    EDIT: Ok, js kommt wohl mit mit html tags klar die sich im Text befinden.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Fragz ()

  • HiHo,

    Also im js Code ist zu finden

    Quellcode

    1. dialogtitle.innerHTML = title;
    2. dialogcontent.className = type;
    3. dialogcontent.innerHTML = message;


    Normal sollte dies doch dann klappen oder Täusche ich mich da?

    Quellcode

    1. // build/show the dialog box, populate the data and call the fadeDialog function //
    2. function showDialog(title,message,type,autohide) {
    3. if(!type) {
    4. type = 'error';
    5. }
    6. var dialog;
    7. var dialogheader;
    8. var dialogclose;
    9. var dialogtitle;
    10. var dialogcontent;
    11. var dialogmask;
    12. if(!document.getElementById('dialog')) {
    13. dialog = document.createElement('div');
    14. dialog.id = 'dialog';
    15. dialogheader = document.createElement('div');
    16. dialogheader.id = 'dialog-header';
    17. dialogtitle = document.createElement('div');
    18. dialogtitle.id = 'dialog-title';
    19. dialogclose = document.createElement('div');
    20. dialogclose.id = 'dialog-close'
    21. dialogcontent = document.createElement('div');
    22. dialogcontent.id = 'dialog-content';
    23. dialogmask = document.createElement('div');
    24. dialogmask.id = 'dialog-mask';
    25. document.body.appendChild(dialogmask);
    26. document.body.appendChild(dialog);
    27. dialog.appendChild(dialogheader);
    28. dialogheader.appendChild(dialogtitle);
    29. dialogheader.appendChild(dialogclose);
    30. dialog.appendChild(dialogcontent);;
    31. dialogclose.setAttribute('onclick','hideDialog()');
    32. dialogclose.onclick = hideDialog;
    33. } else {
    34. dialog = document.getElementById('dialog');
    35. dialogheader = document.getElementById('dialog-header');
    36. dialogtitle = document.getElementById('dialog-title');
    37. dialogclose = document.getElementById('dialog-close');
    38. dialogcontent = document.getElementById('dialog-content');
    39. dialogmask = document.getElementById('dialog-mask');
    40. dialogmask.style.visibility = "visible";
    41. dialog.style.visibility = "visible";
    42. }
    43. dialog.style.opacity = .00;
    44. dialog.style.filter = 'alpha(opacity=0)';
    45. dialog.alpha = 0;
    46. var width = pageWidth();
    47. var height = pageHeight();
    48. var left = leftPosition();
    49. var top = topPosition();
    50. var dialogwidth = dialog.offsetWidth;
    51. var dialogheight = dialog.offsetHeight;
    52. var topposition = top + (height / 3) - (dialogheight / 2);
    53. var leftposition = left + (width / 2) - (dialogwidth / 2);
    54. dialog.style.top = topposition + "px";
    55. dialog.style.left = leftposition + "px";
    56. dialogheader.className = type + "header";
    57. dialogtitle.innerHTML = title;
    58. dialogcontent.className = type;
    59. dialogcontent.innerHTML = message;
    60. var content = document.getElementById(WRAPPER);
    61. dialogmask.style.height = content.offsetHeight + 'px';
    62. dialog.timer = setInterval("fadeDialog(1)", TIMER);
    63. if(autohide) {
    64. dialogclose.style.visibility = "hidden";
    65. window.setTimeout("hideDialog()", (autohide * 1000));
    66. } else {
    67. dialogclose.style.visibility = "visible";
    68. }
    69. }
    Alles anzeigen