how can load html page in a dialogue and open as popup
Question
I have this separate html page which i want to open as dialogue in click of a button, is this possible? 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 answers
solution1
3 2015-09-30 06:00:32
For such think I suggest to use a style Framework like 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/
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:
$('#dialog-form').load('path-to-my-page', function() { $('#dialog-form).dialog('open'); });
solution2
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
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 :)
solution3
2 2015-09-30 06:13:36
You want to create a dialog, and add different HTML code by clicking different button?
1.Create a div, make it looks like a dialog. Don`t display it.
<div id="dialog-form" title="Change Password" style="display: none;"> </div>
2.Define variable like this:
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'); in click handler.
Your can also hide the dialog by $('#dialog-form').html('').css('display', 'none'); .
solution4
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).
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.