2015-02-01 1 views
1

대화 상자에 로그인 양식을 삽입하고 싶습니다. 이제는 대화 상자가 보이지만 형태는 없습니다! 어떤 도움을 주시겠습니까? Google 및이 사이트의 다른 게시물을 보았지만 답변을 찾지 못했습니다! 여기 Jquery UI 대화 상자 내부 HTML이 표시되지 않습니다.

코드입니다 :

$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ 
 
    autoOpen: false, 
 
    modal: true, 
 
    draggable: false, 
 
    resizable: false, 
 
    width: 600, 
 
    height: 400 
 
}); 
 

 
$('#cl').click(function() { 
 

 
    $('.dia').dialog("open"); 
 

 
});
<html lang="en"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <input type="submit" id="cl"> 
 
    <div class="dia"> 
 
    <form class="dia login-form-dia" method="post"> 
 
     <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16"> 
 
     <input type="text" id="si" name="lpassword" placeholder="Password"> 
 
     <input type="submit" name="login" value="LOGIN"> 
 
    </form> 
 
    </div> 
 
</body> 
 

 

 
</html>

답변

0

당신이 .text() 메서드를 호출 할 때 당신이 .dia 요소의 내용을 대체하고 있기 때문이다 : 그것은 보인다

$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ ... }); 

다음과 같이 대신 텍스트를 앞에 씁니다.

$('.dia').attr('title', 'LOGIN').prepend('<h2>Login to eWarsha</h2>').dialog({ ... }); 
..you 그냥 HTML에서 title 속성을 지정하고도 그것을 붙이는 것이 아니라 거기에 원하는 텍스트를 추가 할 수

:

var $dialog = $('.dia').dialog({ 
 
    autoOpen: false, 
 
    modal: true, 
 
    draggable: false, 
 
    resizable: false, 
 
    width: 600, 
 
    height: 400 
 
}); 
 

 
$('#cl').click(function() { 
 
    $dialog.dialog("open"); 
 
});
<html lang="en"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <input type="submit" id="cl"> 
 
    <div class="dia" title="LOGIN"> 
 
    <h2>Login to eWarsha</h2> 
 
    <form class="login-form-dia" method="post"> 
 
     <input type="text" id="si" name="leamil" placeholder="Email" maxlength="16"> 
 
     <input type="text" id="si" name="lpassword" placeholder="Password"> 
 
     <input type="submit" name="login" value="LOGIN"> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>