jquery - Closing <iframe> pages using javascript -


i newbie javascript. have 9 .php pages showing in single php page using <iframe></iframe> this:

<iframe id="alertmaintenance" style="border-style: none; border-color: inherit; border-width: 0px; width:55%;  margin-left:10px;" src="total_dashboard.php" align="left"></iframe> <iframe id="delayreason" style="border-style: none; border-color: inherit; border-width: 0px; width:47%; height:250px;  margin-left:10px;" src="customer_orders.php" align="left"></iframe> <iframe id="delayreason" style="border-style: none; border-color: inherit; border-width: 0px; width:50%; height:250px;  margin-right:10px;" src="unpaid_invoice.php" align="right"></iframe> <iframe id="alertmaintenance" style="border-style: none; border-color: inherit; border-width: 0px; width:47%; height:250px;  margin-left:10px;" src="latest_po.php" align="left"></iframe> <iframe id="delayreason" style="border-style: none; border-color: inherit; border-width: 0px; width:50%; height:250px;  margin-right:10px;" src="latest_po_auth.php" align="right"></iframe> <iframe id="delayreason" style="border-style: none; border-color: inherit; border-width: 0px; width:47%; height:240px;  margin-left:10px;" src="latest_stock_status.php" align="left"></iframe> <iframe id="alertmaintenance" style="border-style: none; border-color: inherit; border-width: 0px; width:50%; height:245px;  margin-left:10px;" src="work_orders.php" align="right"></iframe> <iframe id="delayreason" style="border-style: none; border-color: inherit; border-width: 0px; width:47%; height:250px; margin-left:10px" src="mrp_dashboard.php" align="left"></iframe> 

now want have close button each button. if user not want have pages, can close page clicking close or x. don't know how it.

can please me?

first you'll need give each iframe unique id! can use jquery create close button each iframe , event handler close appropriate one.

note code untested.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">  <script type="text/javascript">     $('iframe').each(function(      ){       $(this).prepend('<input class="closebtn" id="close'+$(this).attr("id")+' "type="button" value="x"/>');       });        $('.closebtn').live('click',function(){       var iframe = $(this).attr("id").split("close")[1];       $('#'+iframe).remove();       }); </script> 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -