jQuery Mobile App으로 로그인 할 때 보안 질문을하는 대화 상자

Question

현재이 작업을 수행하는 더 좋은 방법을 찾고 있습니다. 나는이 애플리케이션에서 위험 기반 보안을위한 일련의 대화 상자 팝업을 만들어야한다. 나는 대화 상자를 simpledialog2로 설정했지만, 더 나은 방법이 있을지도 모릅니다. 콘텐츠가 동적으로 변경되는 단 하나의 대화 상자 일 수도 있습니다. 또한이 개별 대화 상자를 사용하여 마지막 대화 상자를 닫는 문제가 있습니다. 다음 대화 상자도 닫힙니다. 이 상황에서 어떤 사람이 가장 좋은지 잘 알고 있다면 도움을 주시면 감사하겠습니다. 나는 며칠을 연구하고이 주제에 대해 아무것도 찾지 않았다. 고맙습니다! 가까운 문제에 대한 답변에서

$(document).delegate('#security-questions', 'click', function() { 
      $('<div>').simpledialog2({ 
       mode: 'blank', 
       headerText: 'Security Questions', 
       headerClose: true, 
       blankContent : 
       "<div class='question-content'><p>Please choose 5 of the following security questions and provide answers:</p><div data-role='fieldcontain'><select name='question-one-select' id='question-one-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='firstq-div' data-role='fieldcontain'><input type='text' name='question-one' id='question-one' placeholder='Answer' /></div><a href='#' id='second-question' data-role='button' data-rel='dialog'>Next</a></div>" 
      }); 
     }); 

     $(document).delegate('#second-question', 'click', function() { 
      $('<div>').simpledialog2({ 
       mode: 'blank', 
       headerText: 'Question 2', 
       headerClose: true, 
       blankContent : 
       "<div class='question-content'><div data-role='fieldcontain'><select name='question-two-select' id='question-two-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='secondq-div' data-role='fieldcontain'><input type='text' name='question-two' id='question-two' placeholder='Answer' /></div><a href='#' id='third-question' data-role='button' data-rel='dialog'>Next</a></div>" 
      }); 
     }); 

     $(document).delegate('#third-question', 'click', function() { 
      $('<div>').simpledialog2({ 
       mode: 'blank', 
       headerText: 'Question 3', 
       headerClose: true, 
       blankContent : 
       "<div class='question-content'><div data-role='fieldcontain'><select name='question-three-select' id='question-three-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='thirdq-div' data-role='fieldcontain'><input type='text' name='question-three' id='question-three' placeholder='Answer' /></div><a href='#' id='fourth-question' data-role='button' data-rel='dialog'>Next</a></div>" 
      }); 
     }); 

     $(document).delegate('#fourth-question', 'click', function() { 
      $('<div>').simpledialog2({ 
       mode: 'blank', 
       headerText: 'Question 4', 
       headerClose: true, 
       blankContent : 
       "<div class='question-content'><div data-role='fieldcontain'><select name='question-four-select' id='question-four-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='fourthq-div' data-role='fieldcontain'><input type='text' name='question-four' id='question-four' placeholder='Answer' /></div><a href='#' id='fifth-question' data-role='button' data-rel='dialog'>Next</a></div>" 
      }); 
     }); 

     $(document).delegate('#fifth-question', 'click', function() { 
      $('<div>').simpledialog2({ 
       mode: 'blank', 
       headerText: 'Question 5', 
       headerClose: true, 
       blankContent : 
       "<div class='question-content'><div data-role='fieldcontain'><select name='question-five-select' id='question-five-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='fifthq-div' data-role='fieldcontain'><input type='text' name='question-five' id='question-five' placeholder='Answer' /></div><a href='#' id='finish-question' data-role='button' data-rel='dialog'>Done</a></div>" 
      }); 
     }); 

Answer 1

, 당신은 현재 대화 상자를 닫습니다 메소드를 호출 할 필요가 : 여기

는 코드입니다. 이를 수행하는 가장 쉬운 방법은 $.mobile에 글로벌 데이터 포인트를 사용하는 것입니다.(),

$('#dialog2').click(function(){ 
    // close the current dialog 
    $.mobile.sdCurrentDialog.close(); 

    // open the next one 
    $('<div>').simpledialog2({...}); 
}); 

현재 내용을 바꾸려면 바로 updateBlank를 사용하도록 처리기를 변경 : 후속 대화 상자가 열립니다 핸들러의 시작에서, 다음

단순화 된 코드 샘플을 열기 전에 전류를 닫습니다 방법.

$('#dialog2').click(function(){ 
    // update the contents in the current blank-mode dialog 
    $.mobile.sdCurrentDialog.updateBlank('<p>The next question</p>...'); 
}); 

이것은 모두 문서 3 페이지에 명확하게 설명되어 있습니다. simpledialog2에 대한 홈페이지로 이동하십시오. 메인 메뉴 링크를 클릭하여 여기로 이동하십시오 : http://dev.jtsage.com/jQM-SimpleDialog/demos2/event.html