jQuery UI对话框内部html不显示
[英]Jquery UI dialog inner html not showing
问题描述
I want to insert a login form to a dialog. 
我想在对话框中插入一个登录表单。 Now the dialog is showing but without the form ! 现在显示对话框，但是没有表单！ Any help please ? 有什么帮助吗？ I looked on google and other posts on this site but I found no answer ! 我在该网站上搜索了google和其他帖子，但没有找到答案！
here is the code: 这是代码：
$('.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>
1 个解决方案
解决方案1
0 已采纳 2015-02-01 18:44:16
It's because you're replacing the contents of the .dia element when you call the .text() method: 这是因为调用.text()方法时要替换.dia元素的内容：
$('.dia').attr('title', 'LOGIN').text('Login to eWarsha').dialog({ ... });
It seems like you would rather prepend that text using the following instead: 似乎您宁愿使用以下内容代替该文本：
$('.dia').attr('title', 'LOGIN').prepend('<h2>Login to eWarsha</h2>').dialog({ ... });
..you could just specify the title attribute in the HTML, and add the desired text there rather than prepending it too: ..您可以只在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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.