如何在对话框中加载html页面并作为弹出窗口打开
[英]how can load html page in a dialogue and open as popup
问题描述
I have this separate html page which i want to open as dialogue in click of a button, is this possible? 
我有这个单独的html页面，我想单击按钮以对话框形式打开，这可能吗？ how can we do this? 我们应该怎么做？
<div id="dialog-form" title="Change Password">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
4 个解决方案
解决方案1
3 2015-09-30 06:00:32
For such think I suggest to use a style Framework like JQuery UI. 为此，我建议使用类似JQuery UI的样式框架。
It's pretty simple and easily Setup: 它非常简单容易地设置：
For your example you would use: 对于您的示例，您将使用：
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog-form" ).dialog();
});
</script>
</head>
<div id="dialog-form" title="Change Password">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
Have a look at this: https://jqueryui.com/dialog/ 看看这个： https ： //jqueryui.com/dialog/
EDIT: 编辑：
As Robert pointed out that you might Need to open the dialog from another Content page, you can use jQuery.load() Method with a callback to open the dialog: 正如Robert指出的那样，您可能需要从另一个“内容”页面打开对话框，可以将jQuery.load()方法与回调一起使用以打开对话框：
$('#dialog-form').load('path-to-my-page', function() { $('#dialog-form).dialog('open'); });
解决方案2
2 2015-09-30 05:34:31
Yes and have a look at the link below to accomplish this, its pretty straight forward: 是的，请看下面的链接以完成此操作，它非常简单：
Since you did not want to use jquery mobile pop up 由于您不想使用jQuery移动弹出
do this : 做这个 ：
$('#dialog-form').click(function(){
window.open('url', 'window name', 'window settings');
return false;
});
at url, paste the link of the html file and also, you can name your window and add additional settings like height , width etc, if you are fine with the answer you can vote it positively thank you :) 在url处，粘贴html文件的链接，然后，您可以命名窗口并添加其他设置，例如height，width等，如果您对答案满意，则可以对其进行积极投票：)
解决方案3
2 2015-09-30 06:13:36
You want to create a dialog, and add different HTML code by clicking different button? 您要创建一个对话框，并单击不同的按钮来添加不同的HTML代码吗？
1.Create a div, make it looks like a dialog. 1.创建一个div，使其看起来像一个对话框。 Don`t display it. 不要显示它。
<div id="dialog-form" title="Change Password" style="display: none;"> </div>
2.Define variable like this: 2.定义这样的变量：
var html = '<form>' +
'<div class="border">' +
'<label for="oldPassword">Old Password</label>' +
'<input type="password" id ="oldPassword" placeholder="Enter Old Password">' +
'<label for="newPassword">New Password</label>' +
'<input type="password" id="newPassword" placeholder="Enter New Password">' +
'<label for="retypePassword">Retype Password</label>' +
'<input type="password" id="retypePassword" placeholder="Enter Retype password">' +
'</div>' +
'<div class="buttons">' +
'<button id="submit">Submit</button>' +
'<button id="cancel">Cancel</button>' +
'</div>' +
'</form>';
3.Add $('#dialog-form').html(html).css('display', 'block'); 3.添加$('#dialog-form').html(html).css('display', 'block'); in click handler. 在点击处理程序中。
Your can also hide the dialog by $('#dialog-form').html('').css('display', 'none'); 您还可以通过$('#dialog-form').html('').css('display', 'none');隐藏对话框$('#dialog-form').html('').css('display', 'none'); . 。
解决方案4
2 2017-03-22 13:00:55
You easily open a dialog on button click using bootstrap. 您可以使用引导程序轻松打开按钮单击对话框。
If you use template for your project and you want to open a dialog on button click then sometimes jquery dialog not provide proper output as my experience so i use bootstrap dialog(model). 如果您为项目使用模板，并且想在按钮单击上打开对话框，则有时jquery对话框无法提供适当的输出作为我的经验，因此我使用了bootstrap dialog（model）。
<div class="container">
<h2>Small Modal</h2>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dialog-form">Change Password</button>
<div id="dialog-form" title="Change Password" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form>
<div class="border">
<label for="oldPassword">Old Password</label>
<input type="password" id ="oldPassword" placeholder="Enter Old Password">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" placeholder="Enter New Password">
<label for="retypePassword">Retype Password</label>
<input type="password" id="retypePassword" placeholder="Enter Retype password">
</div>
<div class="buttons">
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.