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
Post a Comment