Open modal popup from another page - javascript

So in my website I have a navigation bar. The first "button" on that bar opens a modal pop box. That modal box is created from 4500 lines. Can I add the modal box code to another page (for example modalView.php) and open that up from index.php, without leaving index.php?

i think you can open the popup modal using boostrap.
And put the iframe url inside the modal.
So you can prevent to leaving index.php.
Here is a little example:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</head>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Iframe inside modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
<!-- change the src -->
<iframe width="100%" hight="auto" src="https://stackoverflow.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>
</html>
Modal Boostrap
References
Hope it help. Thankyou!

You can put an iframe in your modal. An html iframe is used to display an external webpage on another, so just put an iframe in your modal, for example, <iframe src="/somepage.html"></iframe>. You can style this iframe, (i.e. width, height) using CSS.

Related

Modal Does Not Work

`cell = '<div class="col-4"><div class="card" style="width: 18rem;">\
<img class="card-img-top" src="products/'+thumb+ '" alt="Card image cap">\
<div class="card-body">\
<h5 class="card-title">'+title+ '</h5>\
<p class="card-text">'+cats+'</p>\
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show More</button>\
</div>\
</div></div>
Code in another page:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<span id="message">Thank You </span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please help me. My modal doesnt show no matter how many times i try. Does modal work in bootstrap cards? No matter how many times i press the button the modal doesnt show. My modal is in another html page. Is there a problem with that? Im using visual studio code
The HTML for the modal must be on (or available) to the page that you're calling it from and wanting it to pop up on. For example:
<html>
<head>
stylesheets
bootstrap javascript libraries
</head>
<body>
<h1>Welcome</h2>
<section>
Content ....
<button>Open the modal!</button>
</section>
<footer></footer>
<div class="modal">
Put modal at bottom
</div>
</body>
</html>
Then, make sure that you are linking to the Bootstrap javascript files and jQuery for the modal to work. Bootstrap has a convenient CDN link for this at https://www.bootstrapcdn.com/

How to make modals with different content

I want to make a website (done). Then I´m adding at least 30 buttons, and when you press the first button, a simple modal comes up with the ability to close, but when you press the second button, the same thing happens! It's just another content.
Let me try to tell you this in my bad programming language.
<div class="button" id="modal1">1</div>
if pressed = "modal1" opens.
<div class="button" id="modal2">2</div>
îf pressed = "modal2" opens with different content.
I would add some code, but I haven´t got any longer than the Bootstrap: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
just check this link http://www.w3schools.com/bootstrap/bootstrap_modal.asp it explain how modal works. You must have data-toggle="modal" data-target="#myModal" in item you click to open modal and you need mention "#myModal" as id of the target modal, use different id to open different modal.
Using the sample you linked, I copied and pasted the first model div to a second and made minor changes so you can see the difference when clicking on the buttons.
I then copied and pasted the button, and changed the data-target attribute in the second button to match the div I added.
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<!-- data-target in the first button matches the id of the first div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- the second button data-target matches the id of thj e second div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- this is copied from the first div, given its own id -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header 2</h4>
</div>
<div class="modal-body">
<p>Some text in the modal. model 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
You can see my three modals, like i said you just need to change data-target="#myModal1" and id="myModal1"
`https://jsfiddle.net/milanpanin/b2pyb6Lq/
If you use Bootstrap modal u need just to change data-target and crate modals for all buttons.

How can I prevent the html loaded within my bootstrap modal from affecting my page html?

I am loading a full html email (with opening and closing html tags) into my modal for previewing purposes. Like this:
//Update modal body
$('.modal-body').html(response['html']);
The issue I'm having is that when I do this, the html loaded seemed to (unsurprisingly) change the main page content outside of the modal.
What I'm wondering is whether there is a way to isolate the html to just the modal area so that it doesn't affect the main page's html.
I've looked into using an iframe for this as an alternative, but the problem for me is that I am loading in this data via ajax (along with other data) and iframe's only seem to support pulling in information via links on the fly.
I would appreciate any potential solutions here.
Thanks!
Tapha:
Instead of Jquery, you can try the following code:
<div>
<object type="text/html" data="http://www.google.com/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object>
</div>
Hope this helps!
These might not function here due to whatever sandboxing that is in place but, this works for me locally.
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();
<iframe id="target"></iframe>
As does:
var target = document.getElementById('target');
target.src = "javascript:'<html><body>Hello world</body></html>'";
<iframe id="target"></iframe>
Though I recognize the second example could be awkward to manage quote wise.
Here is a full working bootstrap example. Well it works locally, but again, not in this sandbox.
var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;
targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe id="target"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Though it fails in the sandbox it render like this locally...

how to add bootstrap-alert box inside a javascript?

I have a JavaScript with alert box saying some text when an image is uploaded with wrong dimension.I want to show that alert as a Bootstrap alert instead of a popup window?
I have a separate JavaScript file.
In Bootstrap they're not called "pop ups", but instead modals. Its the same general principle (a alert onto the screen for the user to interact with), but just more pretty. See the link below for more information on modals, and the code as well (fully functional). Hope this helps. - Jusitn
Link: http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Edit: Dont forget to add the bootstrap CDN's for it to work (both the CSS and Javascript CDNs) between your head tags
CDN can be found here: http://www.bootstrapcdn.com/
Code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap using Modal where to place jquery and bootstrap when using bundleconfig

I use bundle config for my jquery and bootstrap. I have notice that I am getting different results depending on where I place the jquery and bootstrap.
Using standard code
#{
ViewBag.Title = "CreateWebOrder";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<h2>CreateWebOrder</h2>
<div class="container">
<div class="row">
<div class="col-lg-6">
#*<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shipToModal">Add</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
When I add the below scripts and link to the top of the form the modal is working correctly.
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
I would like to use bundle config and add this to the _Layout page.
When I add my jquery and bootstrap on the _layout page at the bottom of the form and remove the scripts and link from the form
#Scripts.Render("~/bundles/myjquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
The modal will display for a second then clear and only show a faded background.
My question is why can't I use my bundle config rather then placing the scripts and link at the top of the form. What is causing this problem?
This might be if you have included the Jquery file or the bootstrap js file more than once. I would suggest you to check your bundle config to see if the Jquery js file or the bootstrap file is not getting invoked more than once.
Multiple references of bootstrap js file can instantiate the modal more than once which can toggle its visibility and add strange behavior to it.
If this does not work please try and check your console to provide some error information if it persists.

Categories