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.
Related
I have implemented successfully notification alert using bootstrap when user press or click of the button but I am looking a way to load alert in the same way without a click of the button. I want it on the page load.
Below is the code:
<div class="row">
<div class="col-md-3">
<button class="btn btn-default btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
</div>
<div class="col-md-3">
<button class="btn btn-default btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
</div>
<div class="col-md-3">
<button class="btn btn-default btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
</div>
</div>
I try onload but it doesn't work for me. if anyone has a better idea or something or better way then it would be great.
(Answer to " ...but i am looking for embed this into php if condion" comment ... I cant write comments this time, Im newbie)
You can add a data attribute (Use_data_attributes) to your html element, what contains a flag.
<div class="col-md-3">
<button id="top_left" class="btn btn-default btn-block" data-condition="<?php echo isset($var) ? 'true' : 'false'; ?>">Top Left</button>
</div>
You can access to this data in your js, and use it in statements, like:
var topLeftButton = document.querySelector('#top_left'); //Or build some logic, if you dont want use ids ...
if (topLeftButton.dataset.condition === 'true') {
//do stuff
//Furthermore, you can modifiy these datas from your js:
topLeftButton.dataset.condition = 'false'; //so now, you turned off this flag
}
You can use the following to get the notification on page load using jquery and Bootstrap
$('#overlay').modal('show');
setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="overlay">
<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">Your heading goes here.. </h4>
</div>
<div class="modal-body">
<p>Your content body goes here..</p>
</div>
</div>
</div>
</div>
For further details refer this Link
Also you can use the noty.js library which is a jQuery plugin to accomplish your task
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
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 have created a phpscript - calculator it's here
How to optimize this short script in php - salary calc
and it is working.
Now I would like to do sth like this. A person on my web page clicks the button, the calculator opens in sth like little window, he uses calculator and when he finishes, closes the window with calculator and is on the webpage again. As I understand I should do it with bootstrap modal like this: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal_sm&stacked=h
Do I understand it right?
How should I link my phpscript with this modal?
thank You for your hints?
what you need is an Ajax method with modal event listener,
Modal HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<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">
<div id="showcal"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
B.S Modal event listener with Ajax Method
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
$.ajax({
type: 'GET',
url: "calculator.php", //this file has the calculator function code
success:function(data){
$('#showcal').html(data);
}
});
});
});
and in last calculator.php
<?php
//Here comes the calculator code
?>
Lemme know if it worked and if not will make it work.
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