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

Line ending issue with Mercurial or Visual Studio -

R - Plot: How to format in 10-base scientific notation and put it text, mtex, title etc functions? -

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