The next page will modify is the blog Dot P HP page.
Go ahead and open the file in your text editor
on this page we need to change the following items
we need to modify the page title headings in footer we need to replace the navigation code with the
p HP requires statement as we have in the other pages we also need to modify the blog posts and activate
the read more buttons so each blog post as an individual read more button
and the objective is to have them launch a modal window which will present the viewer with some additional
content so I'll show you an example on the completed version
so as you can see when I click the read more button the modal appears
in each model is customized relevant to the blog post we clicked on so you can see the title frozen
criminal law team matches the blog post title and then we have some content area here note that will
work on the member only access functionality later on.
So don't worry about the logout function and logging in.
That's something that we're going to be doing after this tutorial
is let's go ahead and get started
reading scroll down to line 12 and just change that the page title
do the same with line 35.
Delete the navigation code
and replace it with the BHP require statement
and on line forty eight.
Change the title company blog to the perfect cup.
And also we'll need to change the footer
so I've just saved the file and I'm going to refresh it.
So the navigation is working.
The title has been updated.
Updated and the footers is also updated.
We'll need to change the text for each blog post.
So here it says the post title and it has some sample text attached to it so we'll just go ahead and
change it to some more relevant information so I'll start with the first one which is which is on line
50 for
and then the second one.
And then the third
I've just saved the changes and we can see that the page has been updated.
Next we need to add a data toggle and data target attribute to each one of these read more buttons and
so the purpose of this is to launch the modal when the button is clicked.
We haven't created the models yet we'll do that after we finish this step so me scroll up to the first
button which is right over here.
Online 59.
And I'm going to replace this with a button element.
So here's our button element type Button class Beatty in and Beatty and info so large size except the
data toggle to model and data target.
To my model remember that the data target will launch the modal associated with this with this I.D.
So it's important that each button has a unique data target name and you'll see that in just a second.
So refreshed and there's the button do the second one.
So this data target is set to my model to and the third one will be set to my model three
OK.
So we have each one of the buttons done just refresh the page and you can see that the button color
is blue because of the class we've used Beatty and dash info if just the blue button.
Now let's go ahead create the models and we'll we'll create the models towards the bottom of the page
right before the footer.
So that's what the modal syntax looks like.
You can see that we've specified the I.D..
And this corresponds to the button that we created earlier
and then we have the class model fade
and in the modal content we have the content area the header for the modal a close button.
And we've worked with models before.
So all this should look familiar.
The modal title modal body and modal footer.
So I'll save that and we'll refresh and I'll go ahead and load the first model so there it is.
That's what it looks like
the syntax for the second and third model is going to be almost identical.
The only thing that's going to change is the I.D. and the content.
For example the title so I've already created the code for this
for modal too and Model 3
and so there it is
modal too there's the I.D. my model to and we can see that the modal title has changed to Irish coffee.
That's the only difference.
Nothing else has changed and for modal three the only thing that's changed is the I.D..
My modal three and the title frozen caramel octane.
So I've saved the file a refresh and now each one should work
and so that completes that page and we'll see you in the next lesson.