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.
Related
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.
Okay so my problem is that when I do the following:
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
That prints the playerdetails.php echo but for some reason it removes my bootstrap controls. Can someone tell me why it's doing it and how to fix it? I've already tried getting the default bootstrap modal template and still it shows the playerdetails.php echoes but it removes all my controls for the modal.
Controls I'm looking for is these:
For these controls to function you need to provide the markup for them, bootstrap doesn't add them to modals automatically. If you can modify the output of playerdetails.php, simply add the markup there...e.g.
<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">Modal title</h4>
</div>
However Bootstrap has deprecated the remote option since v3.3.0 and removed it alltogether in Bootstrap 4. Instead they recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself
If you call jQuery.load yourself you can do something like this:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<!-- load contents here -->
</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>
define your button
<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>
and bind a jQuery click event to it to load your player
$('.btn-open-dialog').on('click', function(){
$('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
/* load finished, show dialog */
$('#myModal').modal('show')
});
});
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>
I Have the modal set like this
<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you
Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".
Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo
Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap
I've gone through a bunch of the articles on this and tried many things and just can't figure out what is going wrong. Basically I've added a very simple modal to my page and when I invoke 'show' it fades the background and brings up a very messed up looking version of the modal, and only when I remove 'hide'.
Please look at the JSFiddle code before answering, any links you post I can all but guarantee I've already visited. Thanks!
http://jsfiddle.net/tY3Nj/
Here is the HTML:
<div id="assignModal" class="fade modal" role="dialog" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Add Assignment</h4>
</div>
<div class="modal-body">
Use me to add an assignment!
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Looks like you're using version 2 markup with version 3 CSS and JavaScript.
See http://getbootstrap.com/javascript/#modals for the proper v3 markup.
<div class="modal fade" id="assignModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Assignment</h4>
</div>
<div class="modal-body">
<p>Use me to add an assignment!</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Updated demo here - http://jsfiddle.net/tY3Nj/1/
When upgrading major versions, you should always take care to read any notes and especially migration guides. From Migrating from 2.x to 3.0 - Additional notes...
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections now get wrapped in .modal-content and .modal-dialog for improved mobile styling and behavior.