Jak wyświetlić adres URL w oknie dialogowym Modem Bootstrap: Kliknij przycisk, kliknij

Muszę załadować stronę (wewnętrzny adres URL) w oknie modalnym. Używałem window.showModalDialog (url, null, features), ale to nie działa poprawnie w Safari, Chrome. Dlatego zdecydowaliśmy się użyć modalnego dialogu Bootstrapa. Nie jestem w stanie wykonać tej pracy. Jakieś pomysły, co mógłbym robić źle?Jak wyświetlić adres URL w oknie dialogowym Modem Bootstrap: Kliknij przycisk, kliknij

//imports 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    //activate content as modal 
     $(document).ready(function(){ 
      $('#test_modal').modal({ 

       }); 
    } 

    ....... 
    ....... 

    $("#btnSubmit").click(function(){ 
    var url = constructRequestURL(); 
     $('#test_modal').modal(data-remote=url,data-show="true"); 
    }); 


    ----- 
    ----- 
    <div class="modal fade" id="test_modal"> 
</div>

Źródło

2013-08-13 agentx

można utworzyć jsfiddle demo na żywo? – Ali

tak. Oto ona: http://jsfiddle.net/CQkYw/3/. Nie mogę jednak ujawnić wewnętrznego adresu URL, który musi zostać załadowany. – agentx

Jeśli masz zamiar kontynuować w dół ścieżki startowej, można zapoznać się tutaj: jsfiddle - remote URI in Bootstrap 2.3.2 modal

Należy pamiętać, że adres URL musi być w tej samej domenie (choć pan wspomniał, że jest " wewnętrzna ") lub Twoja domena będzie musiała być dozwolona przez ustawienia zdalnej kontroli dostępu do strony. Należy więc pamiętać, że demo skrzypiec nie może załadować zawartości z example.com.

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button> 

<div id="myModal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <!-- remote content will be inserted here via jQuery load() --> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div>

Nie trzeba pisać żadnego niestandardowego JavaScript do tego - Bootstrap będzie wiedział, co robić w oparciu o zbiór danych atrybutów, takich jak dane-remote = „http://example.com/whatever” i danych -target = „# myModal” itd

Patrz stosowny rozdział w Bootstrap modal docs o więcej informacji ...

Edit: okazuje się, że zmiana zdalnego URL dynamicznie nie jest tak proste, jak to możliwe. Mam nadzieję, że this answer pomoże ci dalej.

Źródło

2013-08-13 23:55:58 codebyren

Tak. Ale nie znałbym celu danych do czasu wykonywania. Jak mogę ją dynamicznie skonfigurować? – agentx

@agentx bootstrap zajmie się tym. Wystarczy umieścić adres URL w atrybucie 'data-remote' i pozostawić'

'pusty. Bootstrap wypełni treść treścią adresu URL w 'data-remote' – orezvani

Alternatywnie można użyć ozdobnego pudełka. Jest prosty i czysty.

Spójrz tutaj: http://fancyapps.com/fancybox/3/docs/#ajax

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"> 
AJAX content

Źródło

2017-09-02 09:55:43

Jak wyświetlić adres URL w oknie dialogowym Modem Bootstrap: Kliknij przycisk, kliknij

Odpowiedz

Powiązane problemy