So öffnen Sie eine url wie ein bootstrap modal-Fenster?

Habe ich diese Zeile in PHP:

$STRING .= $b_f.'<a href="'.get_home_url().'/wp-login.php" class="ua5 '.$linkclass.'">'.$CORE->_e(array('head','5','flag_link')).'</a>'.$b_a;

Diese url wird nun als eine neue Webseite. Wie kann ich es öffnen, als Popup/modal-Fenster statt? In meinem code habe ich bootstrap installiert.

  • Probieren Sie diese Lösung jsfiddle.net/XUnj8/1 es half mir.
  • Vic Abreu, es lässt sich nicht öffnen, ein modales durch Klick auf den button nur die Webseite von der rechten scroller zu verschwinden. irgendwelche Vorschläge?
  • Nicht wirklich Yaniv Noodelman, dies ist ein funktionierendes Beispiel, das für mich gearbeitet und es wirkt schon auf JSFiddle.
  • Dank Vic Abreu, versuchen Sie es erneut
InformationsquelleAutor Yanivn78 | 2015-04-08
  1. 2

    Versuchen, diese "trick":

    <a href="http://twitter.github.io/bootstrap/" class="btn bootpopup" title="This is title" target="popupModal2">Open modal</a>

<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Title</h3>
    </div>
    <div class="modal-body">
      <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">OK</button>
    </div>
</div>

    und die js:

    $('.bootpopup').click(function(){
  var frametarget = $(this).attr('href');
  var targetmodal = $(this).attr('target');
  if (targetmodal == undefined) {
    targetmodal = '#popupModal';
  } else { 
    targetmodal = '#'+targetmodal;
  }
  if ($(this).attr('title') != undefined) {
    $(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
    $(targetmodal+' .modal-header').show();
  } else {
     $(targetmodal+' .modal-header h3').html('');
    $(targetmodal+' .modal-header').hide();
  }  
    $(targetmodal).on('show', function () {
        $('iframe').attr("src", frametarget );   
    });
    $(targetmodal).modal({show:true});
  return false;

});

    Geben Sie einfach Ihre Verbindung auf die Schaltfläche href.

    DEMO

    • Sorry Schlank, es öffnet sich nur der link in einem neuen tab...
    • Dies ist ein woking-Beispiel. Check meine Antwort Bearbeiten - gibt es ein demo-link.
    • Danke Slim, das werde ich tun
    InformationsquelleAutor Slim
Schreibe einen Kommentar