Как заставить всплывающее окно появляться, когда я переключаю переключатель? - PullRequest
Новая
       11

Как заставить всплывающее окно появляться, когда я переключаю переключатель?

0 голосов
/ 11 ноября 2018

Я использую jQuery Mobile для создания школьного проекта.

Мне нужна кнопка переключения с назначенным Да / Нет, и когда эта опция переключена, я бы хотел, чтобы появилось соответствующее всплывающее окно для подтверждения изменения.

Какой лучший способ это сделать, потому что я попробовал пару вариантов без удачи. Спасибо! 

<!--jQuery CDN Hosted Files-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <form id="flipswitchTeacher">
            <label for="flipswitch">Are you available to teach?</label>
            <select name="flipswitch" id="flipswitch" data-role="flipswitch" data-corners="false">
                <option a href="#confirmTeacherNo" value="no">NO</option>
                <option a href="#confirmTeacherYes" value="yes">YES</option>
            </select>
        </form>


        <div data-role="popup" id="confirmTeacherNo" class="ui-content" data-theme="a">
        <p>Confirm No</p>
        </div>

        <div data-role="popup" id="confirmTeacherYes" class="ui-content" data-theme="a">
        <p>Confirm Yes</p>
        </div>

1 Ответ

0 голосов
/ 11 ноября 2018

Если вы просмотрите детали, найденные здесь: https://api.jquerymobile.com/popup/, вы увидите:

При использовании конфигурации на основе разметки при нажатии на ссылку с data-rel="popup" соответствующаяБудет показан всплывающий контейнер с идентификатором, на который есть ссылка в href ссылки.Чтобы открыть всплывающее окно программно, вызовите всплывающее окно с методом open для всплывающего контейнера:

$( "#myPopupDiv" ).popup( "open" )

Это может быть выполнено так: 

$(function() {
  $("#flipswitch").change(function(e) {
    var target = $("option:selected", this).attr("href");
    $(target).popup("open");
  });
});
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<form id="flipswitchTeacher">
  <label for="flipswitch">Are you available to teach?</label>
  <select name="flipswitch" id="flipswitch" data-role="flipswitch" data-corners="false">
    <option href="#confirmTeacherNo" value="no">NO</option>
    <option href="#confirmTeacherYes" value="yes">YES</option>
  </select>
</form>


<div data-role="popup" id="confirmTeacherNo" class="ui-content" data-theme="a">
  <p>Confirm No</p>
</div>

<div data-role="popup" id="confirmTeacherYes" class="ui-content" data-theme="a">
  <p>Confirm Yes</p>
</div>

Надеюсь, это поможет.

...