Как автоматически открыть модальное всплывающее окно только с внешнего URL - PullRequest
Новая
       10

Как автоматически открыть модальное всплывающее окно только с внешнего URL

0 голосов
/ 07 февраля 2019

Я хотел бы, чтобы при нажатии кнопки была открыта модальная форма, размещенная на другом сервере.

Скажем, кнопка находится на www.web.com/review

Затем, когда вы нажимаетекнопка открывает модальное окно на другом сервере и домене www.example.com/modal.

Я хотел бы иметь кнопку, как показано ниже, на сервере A по URL-адресу www.web.com/review;

<button type="button" class="btn btn-primary btn-lg btn-flat" data-toggle="modal" data-target="#review-box"> Write a review</button>

При нажатии открывается модальный на другом сервере B по URL-адресу www.example.com / modal. 

<!-- Modal -->
<div class="modal fade" id="review-box" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Можно ли это сделать или это надумано?

1 Ответ

0 голосов
/ 07 февраля 2019

На внутреннем сервере необходимо поставить скрипт для кнопки, указывающей на внешнюю ссылку, если вы хотите скрыть внешний адрес, вы можете использовать iframe или указать модальный напрямую. 

    function ExternalLink() {

    let url = 'https://www.externallink.com/;
    window.open(url,"theFrame");
    }

html

    <container>
    <button onClick=ExternalLink()></button>
    <iframe class="embed-responsive-item" name="theFrame" src="#">
    <div class="modal fade" id="myModal" role="dialog">
    </iframe>
    </container>
...