I have been trying to show modal dialog using bootstrap and vue js. I want to show dialog once user successfully registers.
<div>
....
<div class="modal fade" v-if="isEnabled">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
....
</div>
But not able to display the dialog. Can anybody help me to do this?
The modal component is managed by jQuery, you have to use jquery to open your modal.
I need you Vue code too help you much, if it's an ajax request to register user, wait the success callback to make a
$('#modal').modal('show')
If it's a synchronous process, call you modal in the mounted method of you Vue instance.
for eg:
if you want to show modal box on click button then use
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
and if you want to open model box after any process is finished then use
$('#modal').modal('show');
"#myModal" is ID of the modal box you want to show.
more info https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Related
I need to add a popup to the following web app
https://github.com/gunet/openeclass/tree/3.12.x
I have tried to put my code to many files by trial and error but no luck.
Could someone tell me if below code is the appropriate way to do this and in which file should i put it so it shows up in the first page?
https://openeclass.panteion.gr/
<?php
// PHP program to pop an alert
// message box on the screen
// Display the alert box
echo '<script>alert("Welcome to our site")</script>';
?>
As suggested i plan to use the following. Where should i put it and how should i combine it with a cookie so that it is shown only once to each user?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You should not use JavaScript "alert()" function to show some messages to the users. It is an ugly way to do such thing and it is mostly used for old school debugging helper.
In my opinion you can trigger a popover or an alert (see Bootstrap 3 documentation) in $(document).ready(function () { ... } section within template/default/js/main.js. But this would show the message to your visitors every time they open any page. That is why you should show the message only once and remember it in a Cookie variable such as "messageShown=true". In the section which I mentioned above you should check like if(Cookies.messageShown=='false') before you trigger the alert message.
I'm trying to loop my modal. this modal is used to display the user's QR code. but I only get the first value.
this is my modal.
#foreach($siswas as $siswa)
<div class="modal fade" id="qrmodal" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> QR </h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<div class="form-group centered" id="QR">
{!!QrCode::size(200)->generate($siswa->nis)!!}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Print</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Your problem is that the id is not unique.
But this is a bad approach. You should have only one modal and depend on the button clicked you should load the content.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" 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"><?= 'Some kind of 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>
i want create grid with bootstrap in smarty / php
in grid i have name, family, ... & edit button.
when i click in btn edit, modal popup open, but i don't know how sent record ID to function for set query & show in modal:
sample code:
www.bootply.com/webdeveloper/iQrK1Yxlkk
btn:
<a href="" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-backdrop="static">
Edit User
</a>
Modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">
username: ...
<br>
Password: ...
<br>
avatar: ...
<br>
...
</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>
The simpliest solution:
remove attributes data-toggle="modal" and data-target="#myModal"
Add data-id attribute for tag a
Add bind jquery to click for tag a
when user click to tag a:
Insert record ID into hidden text input in modal form
Run bootstrap modal manually $('#myModal').modal()
Hope it will help
EDIT:
Also in documentation i see special event when modal run (probably it is more bootstrap.js way...):
$('#myModal').on('show.bs.modal', function (e) {
// get record ID here
})
so you can use e.target to get attributes of tag a
Again breaking my head in Bootstrap 3. I have been using BT3 with a modal window. The below code works and fetch the remote modal window for the first time and doesn't work in my second click.
I have checked the below forums:
http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/
How to show a URL in Bootstrap Modal dialog: On button click
Bootstrap 3 with remote Modal
http://getbootstrap.com/javascript/#modals
From the documentation:
If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
index.php
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=1">Employee 1</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=2">Employee 2</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=3">Employee 3</a>
<div class="modal fade" id="myModal">
<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">Test</h4>
</div>
<div class="modal-body">Test</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
emp_details.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<?php print_r($_GET); ?>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
So now my questions are:
Is there a way to get the modal box dynamically each time when the href is clicked?
Is there anyway to load the remote content dynamically without any issues?
Waaahuuu..
I missed this answer.
This really worked for me.
Twitter bootstrap remote modal shows same content everytime
just you need to add this script.
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Thanks again