Open Form Popup on the same page

Asked

Viewed 159 times

2

I need that on the home page in the "EHS" Menu, when clicking on the "SMAT" submenu open the form "https://collab.intra.fcagroup.com/sites/cma/EHS/Lists/InserirSmat/Item/newifs.aspx" in a popup on the same page.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="pt">
<!--<![endif]-->

<head>
    <!--====== USEFULL META ======-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Transportation & Agency Template is a simple Smooth transportation and Agency Based Template" />
    <meta name="keywords" content="Portfolio, Agency, Onepage, Html, Business, Blog, Parallax" />

    <!--====== TITULO DO SITE ======-->
    <title>Portal Interativo</title>

    <!--====== ICONE DO SITE =======-->
    <link rel="shortcut icon" type="image/ico" href="img/favicon.png" />

    <!--====== STYLESHEETS ======-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/stellarnav.min.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!--====== MAIN STYLESHEETS ======-->
    <link href="style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body class="home-one">

    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!--- PRELOADER -->
    <div class="preeloader">
        <div class="preloader-spinner"></div>
    </div>

    <!--SCROLL TO TOP-->
    <a href="#home" class="scrolltotop"><i class="fa fa-long-arrow-up"></i></a>

    <!--START TOP AREA-->
    <header class="top-area" id="home">
        <div class="top-area-bg" data-stellar-background-ratio="0"></div>
        <div class="header-top-area">
            <!--MAINMENU AREA-->
            <div class="mainmenu-area" id="mainmenu-area">
                <div class="mainmenu-area-bg"></div>
                <nav class="navbar">
                        <div class="navbar-header">
                            <a href="#home" class="navbar-brand"><img src="img/Logotipo.png" alt="logo"></a>
                        </div>
                        <div class="search-and-language-bar pull-right">
                            <ul>
                                <li><a href="https://collab.intra.fcagroup.com/sites/cma/SitePages/contacts.aspx"><i class="fa fa-user"></i></a></li>
                                </li>
                            </ul>
                            <form action="#" class="search-form">
                                <input type="search" name="search" id="search">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <div id="main-nav" class="stellarnav">
                            <ul id="nav" class="nav navbar-nav">
                                <li><a href="index.html">WCM</a>
                                    <ul>
                                        <li><a href="index.html">MELHORIAS</a></li>
                                        <li><a href="index-2.html">VOTAÇÃO DDI</a></li>
                                        <li><a href="index-3.html">KPI</a></li>
										<li><a href="contact-2.html">​​Registro de Cartões</a>
											<ul>
												<li><a href="contact-2.html">​​Registrar cartão AM</a></li>
												<li><a href="contact-2.html">​​Registrar cartão PM</a></li>
											</ul>
										</li>
                                    </ul>
                                </li>
                                <li><a href="about.html">EHS</a>
                                    <ul>
                                        <li><a href="about.html">EHS</a></li>
                                        <li><a href="about-company-profile.html">Solicitar EPI</a></li>
                                        <li><a href="about-company-history.html">ISO 50001/140001</a></li>
                                        <li><a href="about-company-report.html">SMAT</a></li>
                                        <li><a href="about-team.html">Documentos Gerenciais</a></li>
                                        <li><a href="about-support.html">Certificações CMA</a></li>
                                    </ul>
                                </li>
                                <li><a href="service.html">MAINTENANCE</a>
                                    <ul>
                                        <li><a href="service.html">APONTAMENTOS DE QUEBRA (EWO)</a></li>
                                        <li><a href="service-2.html">EVOLUÇÃO SEMANAL</a></li>
                                        <li><a href="service-3.html">FERRAMENTARIA</a></li>
                                    </ul>
                                </li>
								 <li><a href="index.html">HUMAN RESOURCES</a>
                                    <ul>
										<li><a href="index.html">Apontar Absenteísmo​​</a>
										<ul>
                                        <li><a href="index.html">EHS</a></li>
                                        <li><a href="index-2.html">FERRAMENTARIA</a></li>
                                        <li><a href="index-3.html">LOGÍSTICA</a></li>
										<li><a href="index-3.html">MANUTENÇÃO</a></li>
										<li><a href="index-3.html">PRODUÇÃO</a></li>
										<li><a href="index-3.html">QUALIDADE</a></li>
										<li><a href="index-3.html">WC</a></li>
										</ul>
									</ul>
                                </li>
								<li><a href="contact.html">FINANCE</a>
                                    <ul> 
										<li><a href="contact.html">RELATÓRIO GERAL</a>
                                        <li><a href="contact.html">RELATÓRIOS DE CUSTO​</a>
										<ul>
                                        <li><a href="contact-2.html">​COMPRAS</a></li>
										<li><a href="contact-2.html">CONTROLADORIA</a></li>
										<li><a href="contact-2.html">​DIRETORIA INDUSTRIAL</a></li>
										<li><a href="contact-2.html">EHS</a></li>
										<li><a href="contact-2.html">​​ENGENHARIA DE DESENVOLVIMENTO</a></li>
										<li><a href="contact-2.html">​FERRAMENTARIA</a></li>
										<li><a href="contact-2.html">INFORMÁTICA</a></li>
										<li><a href="contact-2.html">​LOGÍSTICA</a></li>
										<li><a href="contact-2.html">MANUTENÇÃO</a></li>
										<li><a href="contact-2.html">​​PRODUÇÃO DIRETOS</a></li>
										<li><a href="contact-2.html">​​​PRODUÇÃO INDIRETOS</a></li>
										<li><a href="contact-2.html">QUALIDADE</a></li>
										<li><a href="contact-2.html">RECURSOS HUMANOS</a></li>
										<li><a href="contact-2.html">​SEGURANÇA PATRIMONIAL</a></li>
										<li><a href="contact-2.html">W.C.M​​</a></li>
                                    </ul>
									</ul>
								 </li>
                                <li><a href="">LOGISTIC</a>
                                    <ul>
                                        <li><a href="404.html">​​SAP CODE LIST</a></li>
                                        <li><a href="coming-soon.html">Coming Soon</a></li>
                                    </ul>
                                </li>
                                <li><a href="blog.html">​​STAMPING</a>
                                    <ul>
                                        <li><a href="blog.html">​PROGRAMA DE PRODUÇÃO​​</a></li>
                                    </ul>
                                </li>
                                <li><a href="contact.html">WELDING​​</a>
                                    <ul>
                                        <li><a href="contact.html">​APONTAMENTO DE PRODUÇÃO</a></li>
                                        <li><a href="contact-2.html">​APONTAMENTO DE PERDAS</a></li>
										<li><a href="contact-2.html">​​ANÁLISE</a></li>
										<li><a href="contact-2.html">​​CARTÃO DE AM/PM</a></li>
										<li><a href="contact-2.html">GESTÃO DE REFUGO E RETRABALHO​</a></li>
                                    </ul>
                                </li>
								 </li>
                                <li><a href="contact.html">ICT</a>
                                    <ul>
                                        <li><a href="contact.html">DRIVEIT</a></li>
                                        <li><a href="contact-2.html">​PROCEDIMENTOS ICT</a></li>
										<li><a href="contact-2.html">​​SUPPLIERS</a></li>
										<li><a href="contact-2.html">MELHORIAS STEFANINI</a></li>
										<li><a href="contact-2.html">CADASTRO DE ATIVOS MÓVEIS​</a></li>
										<li><a href="contact-2.html">SISTEMA DE INFORMAÇÕES DE COTAS​</a></li>
                                    </ul>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <!--END MAINMENU AREA END-->
        </div>
        <!--HOME SLIDER AREA-->
        <div class="welcome-slider-area">
            <div class="welcome-single-slide slider-bg-one">
                <div class="container">
                    <div class="row flex-v-center">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="welcome-text text-center">
                                <h1>   Automotive Stamping Technology </h1>
                                <p>Stamping process development is a highly collaborative activity requiring effective communication across multiple disciplines including product design, tooling design, manufacturing engineering, industrial operations and production teams.  </p>
                                <div class="home-button">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="welcome-single-slide slider-bg-two">
                <div class="container">
                    <div class="row flex-v-center">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="welcome-text text-center">
                                <h1>   Automotive Welding Technology  </h1>
                                <p>Welding is invariably used in the automotive industries for joining variety of structural components and engine parts. The constant demand for new improved material requirement for automotive applications necessitates the development of innovative joining techniques. In this paper, the welding techniques commonly adapted in the automotive industries.  </p>
                                <div class="home-button">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			 <div class="welcome-single-slide slider-bg-three">
                <div class="container">
                    <div class="row flex-v-center">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="welcome-text text-center">
                                <h1>CMA score: 47 points WCM</h1>
                                <p>BRONZE HERE WE GO!!!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--END HOME SLIDER AREA-->
    </header>
    <!--END TOP AREA-->

    <!--BLOG AREA-->
    <section class="blog-area gray-bg padding-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
                    <div class="single-blog wow fadeInUp" data-wow-delay="0.2s">
                        <div class="blog-image">
                            <img src="img/blog/stamping.jpg" alt="">
                        </div>
                        <div class="blog-details text-center">
                            <h3><a href="single-blog.html">STAMPING</a></h3>
                            <p>TEXTO DO STAMPING</p>
                            <a href="single-blog.html" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
                    <div class="single-blog wow fadeInUp" data-wow-delay="0.3s">
                        <div class="blog-image">
                            <img src="img/blog/welding.jpg" alt="">
                        </div>
                        <div class="blog-details text-center">
                            <h3><a href="single-blog.html">WELDING​​</a></h3>
                            <p>TEXTO DO WELDING​​</p>
                            <a href="single-blog.html" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                    <div class="single-blog wow fadeInUp" data-wow-delay="0.4s">
                        <div class="blog-image">
                            <img src="img/blog/tanks.jpg" alt="">
                        </div>
                        <div class="blog-details text-center">
                            <h3><a href="single-blog.html">TANKS AND PEDALS</a></h3>
                            <p>TEXTO DE TANKS AND PEDALS</p>
                            <a href="single-blog.html" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--BLOG AREA END-->

    <!--TESTMONIAL AREA -->
    <section class="testmonial-area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3 col-sm-12 col-xs-12">
                    <div class="area-title text-center wow fadeIn">
                        <h2>who are our customers?</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
                    <div class="client-photo-list wow fadeIn">
                        <div class="client_photo">
                            <div class="item">
                                <img src="img\client\tiberina.png" alt="">
                            </div>
                            <div class="item">
                                <img src="img\client\jeep.png" alt="">
                            </div>
                            <div class="item">
                                <img src="img\client\pmc.png" alt="">
                            </div>
							<div class="item">
                                <img src="img\client\marelli.png" alt="">
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-20">
                    <div class="client_nav">
                        <span class="fa fa-angle-left testi_prev"></span>
                        <span class="fa fa-angle-right testi_next"></span>
                    </div>
                </div>
                <div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
                    <div class="client-details-content wow fadeIn">
                        <div class="client_details">
                            <div class="item">
                                <q><b> Renegade:</b> COLLEGAMENTO FIANCATA - TELAINO - RINFORZO E. CINT. - TRAVERSA SOTTOSEDILE </q>
								<q><b> Toro:</b> LONGHERINA SU TUN - TELAINO - RINFORZO E. CINT. - TRAVERSA SOTTOSEDILE</q>
								<q><b> Compass:</b> LONGHERINA SU TUN - TELAINO - RINFORZO E. CINT.</q> 
                                <h3>TIBERINA</h3>
                                <p></p>
                            </div>
                            <div class="item">
                                <q><b> Renegade:</b> TELAINO - PUNTONE - TRAVERSA SOTTOSEDILE - RIVESTIMENTO ESTERNO POST. </q>
								<q><b> Toro:</b> TELAINO - PUNTONE - TRAVERSA SOTTOSEDILE - TRAVERSA SOTTOSEDILE POST. </q>
								<q><b> Compass:</b> TELAINO - PUNTONE - TRAVERSA SOTTOSEDILE - TRAVERSA SOTTOSEDILE POST. </q> 
                                <h3>JEEP</h3>
                                <p></p>
                            </div>
                            <div class="item">
                               <q><b> Renegade:</b> LONG. MONT. PARABREZZA - CRUSCOTTO - LONGHERINA - SCATOLAMENTO TRAV. POST. </q>
								<q><b> Toro:</b> LONG. MONT. PARABREZZA - CRUSCOTTO - COLLEGAMENTO FIANCATA - LONGHERINA IN CINT </q>
								<q><b> Compass:</b> LONG. MONT. PARABREZZA - CRUSCOTTO - COLLEGAMENTO FIANCATA - LONGHERINA IN CINT</q> 
                                <h3>PMC AUTOMOTIVE</h3>
                            </div>
                            <div class="item">
                                <q><b> Renegade:</b> PIATTABANDA - LONG. MONT. PARABREZZA </q>
								<q><b> Toro:</b> PIATTABANDA - LONG. MONT. PARABREZZA </q>
								<q><b> Compass:</b> TRAVERSA SOTTOSEDILE - PIATTABANDA</q> 
                                <h3>MARELLI</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--TESTMONIAL AREA END -->

    <!--FOOER AREA-->
    <div class="footer-area dark-bg">
        <div class="footer-area-bg"></div>
        <div class="footer-top-area wow fadeIn">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg- col-sm-12 col-xs-12">
                        <div class="subscribe-content">
                            <h2>Contact</h2>
							<ul>
                                <li><i class="#"></i>+55 81 3040-3040</li>
                                <li><i class="#"></i> [email protected]</li>
                                <li><i class="#"></i> ​Rodovia BR 101 Norte, s/n, Km 13 ao 15, Galpão SP04, Conjunto 02 – Nova Goiana</li>
                            </ul>
							
                        </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="footer-border"> </div>
                    </div>
                </div>
            </div>
        </div>
                      
        <div class="footer-copyright-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                        <div class="footer-copyright wow fadeIn">
                            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                            <p>Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="" aria-hidden="true"></i> by CMA ICT TEAM</a></p>
                            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--FOOER AREA END-->


    <!--====== SCRIPTS JS ======-->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>

    <!--====== PLUGINS JS ======-->
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/vendor/jquery.appear.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/stellar.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/stellarnav.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/jquery.sticky.js"></script>

    <!--===== ACTIVE JS=====-->
    <script src="js/main.js"></script>
</body>

</html>

1 answer

2


create a modal and an iframe for the URL you want.

<a data-toggle="modal" data-target="#myModal">SMAT</a></li>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <iframe src="https://collab.intra.fcagroup.com/sites/cma/EHS/Lists/InserirSmat/Item/newifs.aspx"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
  • It worked, Thanks Caesar. How do you adjust the frame size? I increase the frame but does not increase the display box size.

  • If you are using Bootstrap, you can include css class for this, such as . modal-Sm and . modal-lg, making the element look like <div class="modal-dialog modal-Sm"> for example.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.