I recently started learning JavaScript. I have a link on my homepage that directs to another HTML page, but I would like it to show as a popup on the homepage with responsiveness and some stylish design elements such as a folded corner. Is there a way to achieve this using JavaScript?
Appreciate any help!
To display content from another page in a modal, you can use the <iframe> tag.
$(window).load(function(){
$('#exampleModal').modal('show');
});iframe {
display:block;
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe src="www.google.com"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Have you heard of the "modal box"? If not, here is a helpful guide on how to create one: https://www.w3schools.com/howto/howto_css_modals.asp
When it comes to styling, CSS is your best friend. To give your modal box rounded corners like in the example provided, simply add border-radius: 25px; to the .modal-content class.
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 25px;
}
If you're looking for examples of folded corners, check out resources like https://codepen.io/brownerd/pen/lEHwL or
My current code is : $.getJSON("https://www.domain.com/someapi/callback=?", function(data){ $.each(data, function(i,item){ alert(item.x); }); }); I am currently facing an issue with my JSON response because there is ...
I have product information cards stored in my database, and I successfully display them on the user's page. Now, I want to add a "More Details" button on each card that will link to a new page (/pages/card/[id]). However, I'm unsure how to retrie ...
I have an action result that sends content in the following format: public ActionResult MyAction() { string mystring = //doing something return Content(mystring , "html"); } Client Side: $.ajax({ url: "/MyController ...
I'm having trouble embedding PHP into an HTML file. I modified my .htaccess to recognize HTML files as PHP, but when I attempt to open the .html file in my browser, it gets downloaded instead of being processed and shown. UPDATE: Here is what's ...
I'm facing an issue with a function that filters an array. My goal is to retrieve only the string value, not the entire object. However, I keep getting back the entire object instead of just the string. Interestingly, when I switch the return state ...
When using react 16, setState(null) no longer triggers an update according to the official documentation: The new behavior for calling setState with null is that it does not trigger an update. This gives you the control in the updater function to decide ...
Currently, I am enrolled in Samer Buna's Lynda course titled "Full-Stack JavaScript Development: MongoDB, Node and React." While working on the "Naming Contests" application, I encountered a piece of code within the App component that has left me puzz ...
I'm facing an issue with two bootstrap cards, one nested inside the other, both containing images. Check out the StackBlitz here The inner image doesn't flex to the same height as the outer one, resulting in a small space between the two cards ...
I currently have an Angular app with state management that retrieves data from a database in observables. Here is an example of the interfaces I am working with: interface Service { id: number, name: string, category_id: number, } interface Category ...
Currently, I am faced with a challenge while working on Laravel and utilizing various node packages for development. The issue at hand is my limited internet connectivity. Every time I attempt to execute npm run watch, it refuses to initiate unless I am c ...
I've been troubleshooting this code line by line in the console, and everything seems to be working fine. However, when I input consecutive even numbers, my browser freezes. The solution is probably right in front of me, but I just can't figure i ...
I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...
I need to add meta tags retrieved from the backend for a certain page to the Head section of my page component. In React, I know that I can incorporate HTML using <div dangerouslySetInnerHTML={{__html: response.someHtml}} />. Can this same method b ...
I am looking to streamline E2E testing for a web application. The frontend of the app is built on a JavaScript framework, while the backend uses Java technology. While I am aware of the tools and frameworks available for JavaScript testing, I am curious ...
I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...
Can Express handle requests like this? app.get('/.test/abc', function(req, res) { res.send( 'abc test' ) }) So if I visit localhost:3000/.test/abc, it should display abc test. I tried it but it seems to not be working. Do I need t ...
Currently, I am using a date picker with the calendar icon placed on the right side of the input field by default. However, I would like to move the calendar icon to the beginning of the input field. Despite my efforts to change it, I have not been success ...
I hope you're all having a fabulous Aloha Friday! I have a question regarding HTML emails, specifically in relation to Outlook 2007 and 2010. Currently, I am working on a project that involves layering a couple of PNG images on top of each other, wel ...
How can I send the selected item from the dropdown menu to Axios in order to retrieve data? I need to pass the item itself, not just the ID, to the API. <label>City</label> <select @change="getArea()" v-model="key"> <option :valu ...
Here is the codepen link I mentioned earlier: https://codepen.io/santoshch/pen/LYxOoWO <button @click="resetNow(id)"></button> resetNow(id){ this.$refs[`input-${id}`].input.value = ""; //In some cases, you may need to u ...