We Keep Coding

Bootstrap Modal not loading on page load

Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load();
I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button
For Reference you can check https://theinnovativepackaging.com/
And Modal is as follows
<div id="myDiscountModal" class="modal fade">
<div class="modal-dialog disc-modal">
<div class="modal-content">
<div class="modal-header disc-modal">
<div>
<h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
</div>
<button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-sm-6">
<img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
</div>
<div class="col-sm-6">
<p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
<form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-envelope disc-modal-form-field-icon"></span>
<input type="email" name="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-phone disc-modal-form-field-icon"></span>
<input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
</div>
</div>
<div id="discountMessage" style="display: none;"></div>
<button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
And Javascript Added is:
<script type="text/javascript">
$(window).on('load', function() {
$('#myDiscountModal').modal('show');
});
</script>
Anyone who can guide me what could be the possible conflict that its not working ?

There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>

Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click

By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}

modal on the top and i cant change the width

The modal is in the top of webpage and I cant edit the width of the modal
css
.modal-dialog {
width:1000px;
}
head tag code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The modal code in the html body tag. is there any wrong in my code ?
<div class="modal fade" id="account" 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">×</button>
<center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
</div>
<div class="modal-body">
<div class="container-fluid">
<form method="POST" action="update_account.php">
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Name:</span>
<input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Username:</span>
<input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
</div>
<hr>
<span>Enter current password to save changes:</span>
<div style="height: 10px;"></div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Password:</span>
<input type="password" style="width:350px;" class="form-control" name="cpassword">
</div>
<div class="form-group input-group">
<span class="input-group-addon" style="width:150px;">Confirm Password:</span>
<input type="password" style="width:350px;" class="form-control" name="apassword">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
</form>
</div>
</div>
</div>
</div>
how can I make it fixed?

If you are using Bootstrap for CSS, you could use the modal-lg and modal-sm classes to change the width of the modal, Eg:
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
Also you can use the !important to force redimention the modal with, like said #geoidesic.
.modal-dialog {
width:1000px !important;
}
More information on Bootstrap Modal

Most of these jquery plugins have default CSS that they use, which may be overriding your own CSS. You can try add !important...
.modal-dialog {
width:1000px !important;
}
Note that using !important is usually not a good idea but it should at least confirm that this is the issue.
The right way to set width for this plugin though is probably to send it as a parameter when you call the modal. See the API documentation for the width parameter:
http://api.jqueryui.com/dialog/

Apply new HTML code into the layout

Here is my Codepenlink
I've created a button to show the html code behind a certain area in the layout.
And when I want to edit the code in the textarea such as change the class or add more id... then I press submit to update the new HTML code back into the area but it didn't work and the layout change into a pure HTML code also.
So I don't know if it possible to submit new HTML code back into the layout without reload the page, I'm thinking about apply a form and using AJAX but so far still have no idea how to use it.

Please try this:
//generate html
$(document).on('click', '.btn-success', function() {
var target = $('.example-form').find('form');
$('.bs-example-modal-lg').on('shown.bs.modal', function(e) {
var htmlString = $(target).html();
$("#codeContainer").val(htmlString);
});
});
//apply new html to layout
$("body").on('click', ".modal.bs-example-modal-lg .btn-primary", function() {
var htmlcode = $("#codeContainer").val();
$(".example-form form").html(htmlcode);
});
.btn-html {
margin: 10px 0;
}
.example-form {
padding: 10px;
border: 1px solid #343434;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-html">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">Show HTML</button>
</div>
<div class="example-form">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" 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">Show HTML code behind layout</h4>
</div>
<div class="modal-body">
<textarea id="codeContainer" rows="25" style="width: 100%;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save changes</button>
</div>
</div>
</div>
</div>

The problem is you've already loaded the page by the time you're trying to change it so what you have to do is save the markup to local storage or a database somewhere and reload the page
or...
If you're only allowing changes within a certain portion of your page markup, you could use jquery to apply the changes.
Your jquery of
//apply new html to layout
$(".btn-primary").click(function () {
var htmlcode = $("#codeContainer").text();
$(".example-form form").text(htmlcode);
});
looks like you're on the right track to do it this way, however, you're using the wrong method.
Change it to this:
//apply new html to layout
$(".btn-primary").click(function () {
var htmlcode = $("#codeContainer").text();
$(".example-form form").html(htmlcode);
});

Re-opening modal after closing one, laravel

When I close my bootstrap modal, the modal opens again, then hide and the background stays darken. I am opening the modal on click on table tr. I also tried to force modal hide but it did not work. Please any help'll work.
<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">
<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
<input type="hidden" name="_method" value="put">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{$v_task->task_name}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<label for="listNameInput" class="col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listPriorityInput" class="col-sm-2">Priority:</label>
<div class="col-sm-10">
<input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
<div class="col-sm-10">
<div class="input-group datetimepicker2">
<input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
<div class="input-group-addon calendar-div">
<span class="fa fa-calendar-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
</div>
</div>
</div>
</div>

It seems you have an onclick event which triggers when the close link has been click to close the modal.
Referring to this:
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
There's no need to do that since there's an attribute that would close the modal.
So I suggest change your code above and do below and see how it works.
<a data-dismiss="modal">Close</a>
Update
Ok I see your JS code:
$('.editTaskModal').on('hidden.bs.modal', function () {
$('.editTaskModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
You should not include these, since what it would do is, if the modal is close/hidden it will hide the modal again. Which doesn't make sense since the modal is already close. That could be the reason why it's messing up the modal reveal/hide.
So remove that and see what happens.

Thanks, I found the problem. I had had my modal in tr and I also had triggered the modal opening on tr click and when I was trying to dismiss the modal the event repeated opening.