javascript - how can load html page in a dialogue and open as popup -
i have separate html page want open dialogue in click of button, possible? how can 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>
for such think suggest use style framework jquery ui.
it's pretty simple , setup:
for example 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 @ this: https://jqueryui.com/dialog/
edit:
as robert pointed out might need open dialog content page, can use jquery.load() method callback open dialog:
$('#dialog-form').load('path-to-my-page', function() { $('#dialog-form).dialog('open'); });
Comments
Post a Comment