jQuery와 PHP로 모달 대화 상자를 만들려고 시도합니다.

Question

전자 메일 단추가 있습니다.이 단추를 클릭하면 전자 메일 단추가있는 모달 jQuery UI 대화 상자가 나타납니다.

<input type="button" value="Email to me" onClick="$("#emailModal").dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/> 

그리고 여기 #emailModal입니다 : 내 코드는 여기에

<div id="emailModal"> 
<p><input type="button" value="Email to me" onClick="$('#emailPost').submit()" id="emailJQButton"/></p> 
</div> 

그러나, 내가 버튼을 클릭하면, 아무 일도 발생하지 않고 대화 상자가 팝업되지 않습니다. 모든 코드를 살펴본 결과 문제를 찾을 수 없습니다. 어떤 도움이 필요합니까?

편집 : 문제가 발견하지만 더 하나를 가지고 : 나는 PHP로 표시하고 있습니다

if($_SESSION["loggedIn"] == 1) 
         { 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost'>"; 
          echo "<input type='hidden' value='" . $_SESSION["email"] . "' name='emailAddress'>"; 
          echo "<input type='button' value='Email To Me' onClick='$(\"#emailPost\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
          echo "<h3>Or</h3>"; 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>"; 
          echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>"; 
          echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
         } 
         else 
         { 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>"; 
          echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>"; 
          echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
         } 

지금 에코, 나는 그 특별한 이스케이프 규칙을 필요로한다 알고있다. 인라인 기능은 작동하지 않지만 emailPost 제출이나 대화 상자 닫기는 작동하지 않습니다.

Answer 1

당신도 속성에 "을 사용할 수 있어야한다 (아포스트로피) 코드에 오타가 있습니다. "#emailModal" 대신 '#emailModal'을 사용하십시오.

그러나, 적절한 솔루션이 될 것이다 :

<input type="button" value="Email to me" id="emailButton" /> 
<script type="text/javascript"> 
    $('#emailButton').click(function(e) { 
     e.preventDefault(); 
     $("#emailModal").dialog({title:'Email It Along', height:300, width:350, modal:true, resizable:false}); 
    }); 
</script> 

Answer 2

당신은

onClick="$("#emailModal"). 

그들이 "로 인용하는 경우

가

onClick="$('#emailModal'). 

Answer 3

OTOH 난 당신이 사용한다고 생각

편집

또는 ThiefMaster로

<input type="button" value="Email to me" onClick="$('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/> 

는 라인에 뭔가를 사용하여 시도했다

$(function(){ 
    $('#myinput').click(function(){ 
     $('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false}) 
    }); 
}); 

Answer 4

버튼에 대한 문제는 onClick이며 큰 따옴표 안에 큰 따옴표가 있습니다.

onClick="$("#emailModal").dialog({... 

난 당신이 onClick를 사용하지 않는 것이 좋습니다 당신은 대신에 이벤트를 바인딩 jQuery를 사용합니다.

<input type="button" value="Email to me" id="sendEmail" /> 

<div id="emailModal"> 
    <p><input type="button" value="Email to me" id="emailJQButton"/></p> 
</div> 

<script> 
    $(function(){ 
    $("#emailModal").dialog({ 
     title: 'Email It Along', 
     height: 300, 
     width: 350, 
     modal: true, 
     resizable: false, 
     autoOpen: false 
    }); 

    $('#sendEmail').click(function(){ 
     $("#emailModal").dialog('open'); 
    }); 

    $('#emailJQButton').click(function(){ 
     $('#emailPost').submit(); 
    }); 
    }); 
</script>